如何减少angular7中反应式表单验证的代码答案

【问题标题】：How to reduce code for reactive form validation in angular7如何减少angular7中反应式表单验证的代码
【发布时间】：2020-04-11 07:15:58
【问题描述】：

我正在尝试减少反应式表单验证中的代码。我有很多用于反应式表单验证的代码，所以我的页面加载速度太慢。那么如何解决这个问题以提高速度。我不知道。如果有人知道，请帮助找到解决方案。

 this.registerForm = this.formBuilder.group({
        firstName: [null],
        lastName: [null] 
  });

【问题讨论】：

标签： angular6 angular7 angular-reactive-forms angular8

【解决方案1】：

您可以使用 RxFormGroup 的 reset 方法重置所有表单控件。你只需要安装@rxweb/reactive-form-validators。

resetForm() {
    this.registerForm.resetForm({ resetType: ResetFormType.ControlsOnly });
  }

这是完整的组件代码：

import { Component, OnInit } from "@angular/core";
import { RxFormGroup, RxFormBuilder, FormGroupExtension, ResetFormType} from "@rxweb/reactive-form-validators";
import { HttpClient } from "@angular/common/http";
import { FormArray } from "@angular/forms";

@Component({
  selector: "app-reset-controlsOnly-validator",
  templateUrl: "./reset-controls-only.component.html"
})
export class ResetControlsOnlyValidatorComponent implements OnInit {
  registerForm: RxFormGroup;

  constructor(private formBuilder: RxFormBuilder) {}

  ngOnInit() {
    this.registerForm = <RxFormGroup>this.formBuilder.group({
      firstName: [""]
    });
  }

  resetForm() {
    this.registerForm.resetForm({ resetType: ResetFormType.ControlsOnly });
  }
}

请参考这个工作example

【讨论】：

【解决方案2】：

您可以一次重置所有表单值

resetfn()
{
   this.registerForm.reset();
}

【讨论】：