Функциональность сброса формы в угловых 5

Question

Я показываю значение так быстро, как могу, когда пользователь отправляет текущее значение.В этом случае после отправки текущего значения я сбрасываю форму и предоставляю новое значение пользователю.Это работает как async вызов form.reset выполнение завершается после обслуживания нового значения, поэтому в конце мой пользователь получает нулевое / пустое значение.

Есть ли альтернативные способы достижения этого или какие-либо шансы сделать это 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(); 
  }
}

Вот ДЕМО

Answer 2

Вы должны использовать реактивный подход к форме, потому что это очень легко поддерживать проверку и контроль формы.А используя подход реактивной формы, вы можете использовать метод реактивной формы patchValue или setValue.

Answer 3

я нашел, используя 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 4

Обновить onSubmit метод как:

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

Вам придется использовать setTimeout