以编程方式填写并提交表单 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 形式 post 编辑为 url，仅此而已，但是当代码命中 form.submit() 时，它 post仅空值。我试图模拟提交按钮的点击，但它也不起作用。我想知道那种事情甚至可能吗？在我看来，表格是在填写表格之前提交的。请帮忙

Answer 1

终于！我找到了解决方法。首先要做的事情是：问题是表单提交发生在 html 填充值并且发布的数据为空（空）之前。我不知道只要你想使用 ApplicationRef 模块，with 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。

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

Programaticly fill and submit form Angular 4

html

javascript

angular

angular4-forms