typescript - Angular Reactive Forms: hur man återställer formulärets tillstånd och behåller värden efter inskickning

I ett Angular-reaktivt formulär. Hur återställer man endast tillståndet för formuläret efter en lyckad inlämning?

Här är processen:

  • Skapa formuläret och setValue från tjänstens resultat
  • Ändra värden och skicka in formuläret
  • Om formuläret skickas korrekt till tjänsten, återställ då och behåll värdena

Hur man behåller värden som ändrade och återställer formuläret till dess orörda skick.

Ett form.reset() tömmer helt enkelt formuläret. Men om jag inte anropar det, återställs inte tillståndet och till exempel mina valideringar som beror på formulärets tillståndsklasser (pristine, dirty, valid osv.) finns fortfarande kvar.

Svar #1

Lösningen från @smnbbrv fungerar ganska bra.

Du kan också ange ditt faktiska formulärvärde till reset()-metoden.

Givet att myReactiveForm är ett reaktivt formulär i din komponent. Efter att ditt formulär har skickats framgångsrikt (till exempel genom att anropa en tjänst), kan du då göra:

this.myReactiveForm.reset(this.myReactiveForm.value);

Det kommer att återställa formuläret och ställa in de "nya" formulärvärdena till samma värde som ditt formulär hade.

Denna metod kan ses i Tour of Hero-exemplet i den officiella Angular.io-dokumentationen

Svar #2

Det är ganska enkelt:

this.form.markAsPristine();
this.form.markAsUntouched();

Detta återställer formulärets metadata och formuläret är rent igen

Svar #3

Varning för användare av @angular/components (material)

Det finns en extra komplikation om du använder Angular Material-kontroller, med mat-error för att visa dina fel. Sådana fel visas baserat på resultatet av en ErrorStateMatcher (förutom eventuella *ngIf som du kan ha tillämpat).

Standard ErrorStateMatcher visar fel baserat på en boolean:

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean 
{
   return !!(control && control.invalid && (control.touched || (form && form.submitted)));
}

Så vad detta betyder på engelska är:

Om formuläret någonsin har skickats in och en av dess kontroller blir ogiltig (enligt valideringsreglerna) kommer felet att visas.

Detta är ofta inte vad du vill (särskilt om du läser den här frågan!).

Genom att titta på källkoden - det finns inget sätt att sätta submitted=false om du inte anropar resetForm på ngForm-direktivet (inte på FormGroup-objektet). Att sätta status som pristine eller untouched återställer inte submitted till false.

Om du använder mat-error kan du tycka att det är lättare att skapa din egen ErrorStateMatcher (enkel gränssnitt) för anpassad logik om detta är ett problem.

Observera: ErrorStateMatcher finns endast i Angular Material - och är inte en del av standard Angular-formulär.

Svar #4

04-06-2020: Ionic 5+ och Angular 9+

Bara en enda rad. d.v.s. this.form.reset();

Återställer FormGroup, markerar alla efterkommande som orörda och opåverkade, och sätter värdet för alla efterkommande till null.

 form: FormGroup;

 constructor(private formBuilder: FormBuilder, ) { }

  resetTheForm(): void {
    this.form.reset();
  }

Relaterade artiklar