从验证中重置Angular 9 Reactive

在Angular 9中，我们可以使用Reactive Forms来处理表单验证。当我们需要重置表单中的验证状态时，可以使用reset()方法。

reset()方法用于将表单的值和验证状态重置为初始状态。它接受一个可选的参数来指定表单的初始值。如果没有提供参数，表单的值将被重置为空。

以下是使用reset()方法重置Angular 9 Reactive表单的示例代码：

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  resetForm() {
    this.myForm.reset();
  }
}

在上面的示例中，我们使用FormBuilder来创建一个包含三个字段（name、email和password）的表单，并设置了相应的验证规则。在resetForm()方法中，我们调用reset()方法来重置表单。

在HTML模板中，我们可以通过绑定按钮的点击事件来调用resetForm()方法：

<form [formGroup]="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">

  <label for="password">Password:</label>
  <input type="password" id="password" formControlName="password">

  <button (click)="resetForm()">Reset</button>
</form>

当点击"Reset"按钮时，表单的值和验证状态将被重置为初始状态。

对于Angular 9 Reactive表单的更多信息和示例，请参考腾讯云的官方文档：Angular 9 Reactive Forms