Question

我有以下问题：我需要自动填写表单并立即使用post方法提交给某个网址。这是Component .ts和html示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我只想将原始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。

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

1 个答案: