首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从验证中重置Angular 9 Reactive

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

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

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

代码语言:txt
复制
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()方法:

代码语言:txt
复制
<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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • element-ui 表格hook 及相关组件

    使用例子 <template>

    <Searchbar :searchBarConf='searchBarConf'/>
    <el-button type='text' @click="onEditor(slotProps)" > 编辑 </e

    01
    领券