如何在 angular 6 中最小化反应式表单验证脚本

Question

我试图减少反应式表单验证中的脚本，但没有用。任何人都可以从我的代码中找到错误。

表单 Angular 生成器代码

    public obj=["firstName","lastName",'password','confirmPassword'];

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
          for(var i=0;i<=this.obj.length;i++){ 
           this.obj[i]: ['', Validators.required]
          } 
     email: new FormControl('',{Validators:[Validators.required],updateOn:'blur'})
        } );
    }

https://stackblitz.com/edit/angular-7-reactive-form-validation-rzsfa9?file=app/app.component.ts

Answer 1

请将声明和 ngOnInit() 函数更改为以下代码

registerForm;
submitted = false;
obj=["firstName","lastName",'email','password','confirmPassword'];
constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
  this.registerForm = new FormGroup({});
  for(var i=0;i<=this.obj.length;i++){
    if(this.obj[i] == "email"){
      this.registerForm.addControl(this.obj[i], new FormControl('',[ Validators.required,Validators.email]))
    }
    else
    {
      this.registerForm.addControl(this.obj[i], new FormControl('', Validators.required))
    }

  };

}

这是link更新后的代码

https://stackblitz.com/edit/angular-7-reactive-form-validation-dmq3bq

Answer 2

  registerForm: FormGroup;
  submitted = false;
  obj = ["firstName", "lastName", "email", "password", "confirmPassword"];

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    for (var i = 0; i <= this.obj.length; i++) {
      this.registerForm.addControl(
        this.obj[i],
        new FormControl("", Validators.required)
      );
    }
  }

Answer 3

你可以试试这个

arr = [];tmp={}
validationFun(){
  for(var i=0;i<this.obj.length;i++){
    this.tmp[this.obj[i]] = ['', Validators.required];
    this.arr.push(this.tmp)
  }
  return this.arr[0];
}

然后调用validationFun()

 this.registerForm = this.formBuilder.group(
      this.validationFun()
    );

如何在 angular 6 中最小化反应式表单验证脚本

How to minimize reactive form validation script in angular 6

angular

angular-reactive-forms

angular7