当 Reactive Form 中需要所有表单字段时，我们如何设置 Validators.required 一次？

Question

angular v 4.4.3.

在 Reactive Form 中，我们可以在每个表单字段中编写 Validators.required，如下所示

this.loginForm = this.fb.group({
                firstName: ['', [Validators.required, Validators.maxLength(55)]],
                lastName: ['', Validators.required],
                age: [1, Validators.required],
                email: ['', Validators.required],
                username: ['', Validators.required],
                gender: ['', Validators.required],
                address: this.fb.group({
                    city: ['', Validators.required],
                    country: ['', Validators.required]
                })
            });

这里我们需要在每个表单域上写Validators.required。

所以我正在寻找 angular FormBuilder/FormControl 中的任何 solution/method，它设置了所有必需的字段，并且可以根据需要在该字段上设置附加验证器。

Answer 1

您可以编写一个函数来深度迭代 FormGroup 和 FormArray:

deepIterate(control: FormGroup | FormArray, iteratee: (control) => void): void {
    _.forEach(control.controls, control => {
        if (control instanceof FormControl) {
            iteratee(control);
        } else if (control instanceof FormGroup || control instanceof FormArray) {
            FormUtils.deepIterate(control, iteratee);
        }
    });
}

现在要为每个 FormControl 添加 required 验证器，您可以使用此功能：

addRequiredValidators(control: FormGroup | FormArray): void {
    deepIterate(
        control,
        (control) => control.setValidators(Validators.compose([Validators.required, control.validator]))
    );
}

您可以在创建 FormGroup 后调用 addRequiredValidators。

Answer 2

您可以为整个表单创建一个 customValidator，

this.form = this.fb.group({
  firstName: ['', [Validators.maxLength(55)]],
  ....
},
{
   validator: this.myValidator()
});


myValidator()
{
return (group: FormGroup) => {
    let errors:any={};
    let conError:boolean=false;
    if (!group.value.firstName)
    {
         errors.requiredFirstName=true;
         conError=true;
    }
     ....
    return conError? errors:null
  }
}

//.html 变成像

<form [formGroup]="form " (ngSubmit)="onSubmit()">
    <div class="form-group">
         <label for="firstName">UserName</label>
         <input type="text" class="form-control"
             id="firstName" formControlName = "firstName">
     <!--see that we ask about form?.errors?requiredFirsName 
          requiredFirsName is the property we add to errors
         we add the condition is touched too 
         because else, at first, Angular show the error-->
             <span class="help-block" *ngIf="form?.errors?.requiredFirstName && 
     form.get('firstName').touched ">First Name required</span>
    </div>
    ....
   <!--just for check -->
   {{form?.errors |json}}
</form>

Answer 3

采用干净的方法。

[{
  "firstname": ""
  "required": "true/false",
  "pattern" :""
},
{
  "lastname": ""
  "required": "true/false",
  "pattern" :""
}]

创建包含必填字段/子字段的数组。对该数组执行 for each 循环并创建表单控件。

例如：

或者如果您只关心 Validator.required - 那么@Ludevik 的答案是最好的选择，但是对于 angular 来说这将是额外的工作 - 首先你定义表单控件然后你定义Validator.required

当 Reactive Form 中需要所有表单字段时，我们如何设置 Validators.required 一次？

How can we set Validators.required once when all form field are required in Reactive Form?

angular

typescript

angular-reactive-forms

angular-forms