Angular 基于大规模用户选择的验证

我有一个用户表单，其中有多个字段，根据用户的类型，我使用了角度反应表单，并希望验证我的字段

这是我的组件ts代码：

export class AppComponent implements OnInit {

userformGroup: FormGroup;
        Types = [ "user","admin", "guest"];
type: string;

constructor(
    private formBuilder: FormBuilder){}

ngOnInit() {
 this.userformGroup = this.formBuilder.group({
      type: ['user'],
       userName : [''],
      firstName :[''],
      lastName :[''],
        email :[''],
        contactNumber :[''],
        licenseNo :[''],
        age:[''],
        birthDate :[''],
        city:[''],
        country:[''],
        zipCode :[''],
        countryCode:['']
        });
  }

    updateValidators() {
    if (this.type === 'user') {
      this.userformGroup.get('userName').setValidators([Validators.required]);
      this.userformGroup.get('firstName').setValidators([Validators.required]);
      this.userformGroup.get('lastName').setValidators([Validators.required]);
      this.userformGroup.get('email').setValidators([Validators.required]);
      this.userformGroup.get('contactNumber').setValidators([Validators.required]);
       this.userformGroup.get('licenseNo').setValidators([Validators.required]);
         this.userformGroup.get('age').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
       this.userformGroup.get('birthDate').setValidators([Validators.required]);
       this.userformGroup.get('city').setValidators([Validators.required]);
        this.userformGroup.get('country').setValidators([Validators.required]);
       this.userformGroup.get('zipCode').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
     this.userformGroup.get('countryCode').setValidators([Validators.minLength(3)]);
    }
      else if(this.type === 'admin')
    {
      this.userformGroup.get('userName').setValidators([Validators.required]);
      this.userformGroup.get('firstName').setValidators([Validators.required]);
      this.userformGroup.get('lastName').setValidators([Validators.required]);
      this.userformGroup.get('email').setValidators([Validators.required]);
      this.userformGroup.get('contactNumber').setValidators([]);
       this.userformGroup.get('licenseNo').setValidators([Validators.required]);
         this.userformGroup.get('age').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
       this.userformGroup.get('birthDate').setValidators([]);
       this.userformGroup.get('city').setValidators([Validators.required]);
        this.userformGroup.get('country').setValidators([]);
       this.userformGroup.get('zipCode').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
     this.userformGroup.get('countryCode').setValidators([Validators.minLength(3)]);    
    }
      else if(this.type === 'guest')
    {
      this.userformGroup.get('userName').setValidators([]);
      this.userformGroup.get('firstName').setValidators([]);
      this.userformGroup.get('lastName').setValidators([Validators.required]);
      this.userformGroup.get('email').setValidators([]);
      this.userformGroup.get('contactNumber').setValidators([]);
       this.userformGroup.get('licenseNo').setValidators([Validators.required]);
         this.userformGroup.get('age').setValidators([]);
       this.userformGroup.get('birthDate').setValidators([]);
       this.userformGroup.get('city').setValidators([Validators.required]);
        this.userformGroup.get('country').setValidators([]);
       this.userformGroup.get('zipCode').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
     this.userformGroup.get('countryCode').setValidators([Validators.minLength(3)]);    
    }
     this.userformGroup.get('userName').updateValueAndValidity();
    this.userformGroup.get('firstName').updateValueAndValidity();
    this.userformGroup.get('lastName').updateValueAndValidity();
    this.userformGroup.get('email').updateValueAndValidity();
    this.userformGroup.get('contactNumber').updateValueAndValidity();
    this.userformGroup.get('licenseNo').updateValueAndValidity();
    this.userformGroup.get('age').updateValueAndValidity();
    this.userformGroup.get('birthDate').updateValueAndValidity();
    this.userformGroup.get('city').updateValueAndValidity();
    this.userformGroup.get('country').updateValueAndValidity();
    this.userformGroup.get('zipCode').updateValueAndValidity();
    this.userformGroup.get('countryCode').updateValueAndValidity();
    }
    onChange(event: any) {
    this.type = event.target.value;
    this.updateValidators();
  }
}

这段代码运行得很好，但我正在寻找一种优化的验证方法，我如何才能做到这一点，这样我就不必在相同的字段上重复应用验证了

---

您可以重新组织验证条件

将验证直接应用于所有3种类型通用的声明

this.userformGroup = this.formBuilder.group({
    type: ['user'],
    userName: [''],
    firstName: [''],
    lastName: ['', [Validators.required]],
    email: [''],
    contactNumber: [''],
    licenseNo: ['', [Validators.required]],
    age: [''],
    birthDate: [''],
    city: ['', [Validators.required]],
    country: [''],
    zipCode: ['', [Validators.pattern('/^-?(0|[1-9]\d*)?$/')]],
    countryCode: ['', [Validators.required, Validators.minLength(3)]]
});

在updateValidators函数中重新组织if-else块

您不需要对验证从未更改的控件调用updateValueAndValidity

我注意到你的代码还有其他一些问题

onChange函数永远不会从html调用。 表单初始化时未调用updateValidators函数。在这种情况下，将“用户”值分配给类型控件时，需要使用该选项。在表单初始化后添加这两行

this.type = 'user';
this.updateValidators();

html第12行有一个输入错误。应该是

formControlName="userName"

---

您可以编写一个自定义验证器函数，根据当前用户类型应用不同的验证：

requiredForTypes(...types: string[]): ValidatorFn {
  return (control: AbstractControl) => {
    if (types.indexOf(this.type) > -1) {
      return Validators.required(control);
    }
    return null;
  }
}

然后更新表单控件以使用自定义验证程序：

this.userformGroup = this.formBuilder.group({
  type: [this.type, Validators.required],
  userName: new FormControl('', this.requiredForTypes('user', 'admin')),
  firstName: new FormControl('', this.requiredForTypes('user', 'admin')),
  lastName: new FormControl('', Validators.required),
  email: new FormControl('', this.requiredForTypes('user', 'admin')),
  contactNumber: new FormControl('', this.requiredForTypes('user')),
  licenseNo: new FormControl('', Validators.required),
  age: new FormControl('', Validators.pattern('/^-?(0|[1-9]\d*)?$/')),
  birthDate: new FormControl('', this.requiredForTypes('user')),
  city: new FormControl('', Validators.required),
  country: new FormControl('', this.requiredForTypes('user')),
  zipCode: new FormControl('', Validators.pattern('/^-?(0|[1-9]\d*)?$/')),
  countryCode: new FormControl('', Validators.minLength(3)),
});

最后，在用户类型更改时触发验证：

this.userformGroup.controls.type.valueChanges.subscribe(type => {
  this.type = type;

  Object.keys(this.userformGroup.controls).forEach(key => {
    if (key !== 'type') {
      this.userformGroup.controls[key].updateValueAndValidity();
    }
  })
});

---

您可以使用条件表达式根据用户的选择使用验证，而不是定制验证函数或在组件中编写太多代码，这里我使用了@rxweb validatorsRxwebValidators中的验证

最佳代码是：

export class UserInfoAddComponent implements OnInit {

    userInfoFormGroup: FormGroup
        Types = [ "user","admin", "guest"];
    constructor(
        private formBuilder: RxFormBuilder
    ) { }

   ngOnInit(){
    this.userInfoFormGroup = this.formBuilder.group({
      type:[''],
      userName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      firstName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      lastName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      email :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],     
        contactNumber :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],   
      licenseNo :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],  
     age:['', RxwebValidators.pattern({expression:{'onlyDigit': /^[0-9]*$/}  ,conditionalExpression:(x) => x.type == 'user' })], 
     birthDate:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      city:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      country:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      zipCode:['',RxwebValidators.pattern({expression:{'zipCode': /^-?(0|[1-9]\d*)?$/}  ,conditionalExpression:(x) => x.type == 'user' })], 
       countryCode:['',RxwebValidators.minLength({value:3,conditionalExpression:(x) => x.type == 'user' })], 


    });


    }
}

---

工作示例

@DeborahK在您提供的链接中显示：onlySelf:true时，仅更新此控件。如果为false或未提供，则更新所有直接祖先。默认值为false。它不会更新子项的验证状态。

export class UserInfoAddComponent implements OnInit {

    userInfoFormGroup: FormGroup
        Types = [ "user","admin", "guest"];
    constructor(
        private formBuilder: RxFormBuilder
    ) { }

   ngOnInit(){
    this.userInfoFormGroup = this.formBuilder.group({
      type:[''],
      userName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      firstName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      lastName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      email :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],     
        contactNumber :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],   
      licenseNo :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],  
     age:['', RxwebValidators.pattern({expression:{'onlyDigit': /^[0-9]*$/}  ,conditionalExpression:(x) => x.type == 'user' })], 
     birthDate:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      city:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      country:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      zipCode:['',RxwebValidators.pattern({expression:{'zipCode': /^-?(0|[1-9]\d*)?$/}  ,conditionalExpression:(x) => x.type == 'user' })], 
       countryCode:['',RxwebValidators.minLength({value:3,conditionalExpression:(x) => x.type == 'user' })], 


    });


    }
}