以编程方式填写并提交Angular 4表格

Question

I have following problem: I need to auto fill form and immediately submitted to some url with post method. this is Component .ts and html example:

 import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, Renderer } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { PayModel } from './shared/pay.model'; import { PayService } from './shared/pay.service'; @Component({ selector: 'cp-pay', templateUrl: './pay.component.html', styleUrls: ['./pay.component.css'] }) export class PayComponent implements OnInit { model: PayModel; cardProcessingId: number; constructor( private payService: PayService, private route: ActivatedRoute, private renderer: Renderer ) { this.cardProcessingId = route.snapshot.params["processingid"]; } ngOnInit() { this.model = new PayModel(); this.getProcessing(); } getProcessing() { this.payService.getProcessing(this.cardProcessingId).subscribe( res => { this.model.fname = res.fname; this.model.lname = res.lname; this.model.age = res.age; } err => { console.log('getProcessing Error') }, () => { let form: HTMLFormElement = <HTMLFormElement>document.getElementById('payform'); form.submit(); } ); } } 

 <form ngNoForm id="payform" action="https://localhost:44300/api/pay/test" target="_blank" method="post"> <input type="text" id="fname" name="merchant" value="{{model.fname}}" /> <input type="text" name="lname" value="{{model.lame}}" /> <input type="text" name="age" value="{{model.age}}" /> <input type="submit"> </form> 

I just want raw html form to be posted to url, that's all, but when code hits form.submit() it posts null values only. I tried to simulate submit button click but it does not work either. I wonder is that kind of thing even possible? It seems to me that form gets submitted before the form is filled. Pls help

Answer 1

Finally! I have found a workaround. First things first: the problem was that form submit was happening before the html was populated with values and data posted was empty (null). I didn't know that with Angular could force html to be populated with values pretty much whenever u want using ApplicationRef module. All you need to do is to import module, create ApplicationRef instance and call it's method .tick() whenever you want to html values to be filled. My code should be like this now:

import { Component, OnInit, ElementRef, AfterViewInit, ApplicationRef} from '@angular/core';
    import { ActivatedRoute } from '@angular/router';

    import { PayModel } from './shared/pay.model';
    import { PayService } from './shared/pay.service';
    @Component({
        selector: 'cp-pay',
        templateUrl: './pay.component.html',
        styleUrls: ['./pay.component.css']
    })
    export class PayComponent implements OnInit {

        model: PayModel;
        cardProcessingId: number;

        constructor(
            private payService: PayService,
            private route: ActivatedRoute,
            private appRef: ApplicationRef

        ) {
            this.cardProcessingId = route.snapshot.params["processingid"];
        }
        ngOnInit() {
            this.model = new PayModel();
            this.getProcessing();

        }

        getProcessing() {
            this.payService.getProcessing(this.cardProcessingId).subscribe(
                res => {
                   this.model.fname = res.fname;
                   this.model.lname = res.lname;
                   this.model.age = res.age;
                   appRef.tick(); // to immediately force html value fill
                   }
                    err => {
                    console.log('getProcessing Error')
                },
                () => {
                    let form: HTMLFormElement = document.getElementById('payform');

                    form.submit();
                }
            );
      }
    }

On Html side ngNoForm not needed in form tag.