Блог

У меня есть форма, использующая angular 7. У меня проблема с моей FormGroup, и HTML-входы, связанные с FormControls этой FormGroup, не синхронизированы после сброса. Мои входные данные очищены, но мои элементы управления формой имеют ожидаемые значения сброса.

Я могу синхронизировать их с помощью кнопки сброса, которая не имеет типа «reset», но привязывает ее событие onclick. Кроме того, я могу заставить работать семантически правильную кнопку сброса, проглотив событие и выполнив сброс формы.

Однако для меня это кажется семантически некорректным. Не говоря уже о том, что рабочая версия кода, которую я хочу использовать, работает намного удобнее с семантически правильным кодом, при условии, что я могу решить эту проблему синхронизации.

Из соображений простоты и изоляции поведения я адаптировал код из документов angularhttps://angular.io/api/forms/FormControlName

Ниже приведен мой проблемный код

 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'});
  }

}
  

Ниже приведен мой код, который ведет себя так, как требуется

 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'});
  }

}
  

Вот еще одна итерация, которая работает правильно, она улавливает событие и останавливает его, прежде чем продолжить с моим кодом сброса.

 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'});
  }

}
  

Есть ли «лучший» способ выполнить сброс формы с помощью FormGroup от angular, чем то, что я написал выше?