javascript - 以编程方式填写并提交表单Angular 4

Question

我有以下问题:我需要自动填写表单并立即使用 post 方法提交到某个 url。这是组件 .ts 和 html 示例:

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>

我只想将原始 html 表单发布到 url，仅此而已，但是当代码点击 form.submit() 时，它只发布空值。我试图模拟提交按钮的点击，但它也不起作用。我想知道那种事情甚至可能吗？在我看来，表格是在填写表格之前提交的。请帮忙

Answer 1

终于!我找到了解决方法。首先要做的事情是:问题是表单提交发生在 html 填充值并且发布的数据为空(null)之前。我不知道只要你想使用 ApplicationRef 模块，Angular 就可以强制用值填充 html。您需要做的就是导入模块，创建 ApplicationRef 实例并在您想要填充 html 值时调用它的方法 .tick() 。我的代码现在应该是这样的:

    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();                }            );      }    }

在 Html 端，表单标签中不需要 ngNoForm。