angular - Angular 5 中的表单重置功能

Question

当用户提交当前值(value)时，我会尽快提供值(value)。在这种情况下，在提交当前值后，我将重置表单并为用户提供新值。它作为 async 调用 form.reset 执行在提供新值后完成，所以最后我的用户得到 null/空值。

是否有任何替代方法来实现此目的或是否有机会使其sync

代码:.ts

     @ViewChild('f') form

     ngOnInit() {
       this.initialCall();
     }

     initialCall() {
       this.name = 'Angular 5';
     }

     onSubmit(){
       this.form.reset(); //reset form
       this.initialCall(); //serve next value
     }

.html

<form  #f="ngForm"  (ngSubmit)="onSubmit(f.value)">
  <label>Name</label>
  <input type="text" [(ngModel)]="name" name="initail">
  <button type="submit">Done</button>
</form>

我期望的是在单击 Done 按钮后，我需要在文本字段中显示“Angular 5”，但它显示为空。

谁能解释为什么这里没有发生变化检测？

Answer 1

你可以使用，

onSubmit(){
    this.form.form.markAsPristine();
    this.form.form.markAsUntouched();
    this.form.form.updateValueAndValidity();
}

代码如下:

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  name: string;
  @ViewChild('f') form
  ngOnInit() {

    this.InitialCall();
  }
  InitialCall() {
    this.name = 'Angular 5';
  }

  onSubmit(){
    this.form.form.markAsPristine();
    this.form.form.markAsUntouched();
    this.form.form.updateValueAndValidity();

    this.InitialCall(); 
  }
}

Here is a DEMO