Question

我在用户提交当前值时尽可能快地提供价值。在这种情况下，在提交当前值之后，我重置表单并向用户提供新值。它在async调用form.reset执行完成后，在提供新值后完成，所以最后我的用户获得null / empty值。

是否有其他方法可以实现这一目标或任何实现这一目标的机会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按钮后，我需要显示＆＃39; Angular 5＆＃39;在文本字段中，但它显示为空。

任何人都可以解释为什么在这里没有发生变化检测？

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

Answer 2

我发现使用ChangeDetectorRef，它的工作就像一个魅力！

import { Component, OnInit, ViewChild , ChangeDetectorRef} 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();
  }
  constructor(private changeDetectorRef: ChangeDetectorRef){}
  InitialCall() {
    this.name = 'Angular 5';
  }

  onSubmit(){
    this.form.reset();
    this.changeDetectorRef.detectChanges();
    this.InitialCall(); 
  }
}

Answer 3

将onSubmit方法更新为：

onSubmit(){
    this.form.reset();
    setTimeout(() => {
      this.InitialCall(); 
    }, 1)
}

您必须使用setTimeout

Answer 4

您应该对表单使用反应式表单方法，因为这很容易维护表单的验证和控制。通过使用反应形式方法，您可以使用patchValue或setValue方法的反应形式。

角度5中的表单重置功能

4 个答案: