angular - Tilbakestilling av FormGroup med verdi-argument tilbakestiller FormGroup riktig, men tømmer HTML-inndataene tilknyttet FormControls

Jeg har et skjema som bruker Angular 7. Jeg har et problem med FormGroup-en min, og HTML-inputene som er knyttet til FormGroup-ens FormControls, havner ut av synk etter tilbakestilling. Inputene mine blir slettet, men formkontrollene mine har de forventede tilbakestilte verdiene.

Jeg kan få dem til å holde seg synkronisert ved å bruke en tilbakestillingsknapp som ikke er av typen "reset" men binder sin onclick-hendelse. Jeg kan også få den semantisk riktige tilbakestillingsknappen til å fungere ved å svelge hendelsen og fortsette med skjema-tilbakestilling.

Dette føles imidlertid semantisk feil for meg. For ikke å nevne at produksjonsversjonen av koden jeg ønsker å bruke fungerer mye mer praktisk med den semantisk korrekte koden, forutsatt at jeg kan få løst dette synkroniseringsproblemet.

Av hensyn til enkelhet og atferdsisolasjon har jeg tilpasset kode fra Angulars dokumentasjon https://angular.io/api/forms/FormControlName

Nedenfor er koden min som gir problemer

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()" (reset)="resetToDefault()">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  resetToDefault(): void {
    this.form.reset({first: 'wicca', last: 'woo'});
  }

}

Nedenfor er koden min som oppfører seg som ønsket

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <!--Changed from type="reset" button to button with click event binding-->
      <button (click)="resetToDefault()">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  resetToDefault(): void {
    this.form.reset({first: 'wicca', last: 'woo'});
  }

}

Her er en annen iterasjon som fungerer korrekt, den fanger opp hendelsen og stopper den før den fortsetter med tilbakestillingskoden min.

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()" (reset)="resetToDefault($event)">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  resetToDefault(event): void {
    event.preventDefault();
    event.stopPropagation();
    this.form.reset({first: 'wicca', last: 'woo'});
  }

}

Finnes det en «bedre» måte å utføre en skjema-tilbakestilling med Angulars FormGroup på enn det jeg har skrevet ovenfor?

Relaterte artikler