Question

我有一个使用angular 7的表单。我的FormGroup遇到问题，并且与该FormGroup的FormControls关联的HTML输入在重置后不同步。我的输入已清除，但是表单控件具有预期的重置值。

我可以通过使用不是“ reset”类型但绑定其onclick事件的重置按钮来使它们保持同步。另外，我可以通过吞下该事件并进行表单重置来使语义正确的重置按钮正常工作。

但是，这对我来说在语义上是不正确的。更不用说，只要可以弄清这个同步问题，我想使用的代码的生产版本与语义正确的代码一起使用会更加方便。

出于简单性和行为隔离的原因，我改编了angular的文档https://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'});
  }

}

与我上面编写的内容相比，使用angular的FormGroup进行表单重置是否有“更好”的方法？

使用值arg重置FormGroup可正确重置FormGroup，但清除与FormControls相关的HTML输入

0 个答案: