代码之家 › 专栏 › 技术社区 › xkeshav

当所有表单字段都是反应式表单所必需的时,我们如何设置Validators.required一次?

angular-forms angular-reactive-forms typescript angular

xkeshav · 技术社区 · 6 年前

以反应形式,我们可以写 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]
                })
            });

在这里我们需要写作在每个窗体字段上。

3 回复 | 直到 6 年前

Eliseo 6 年前

你可以为整个表单创建一个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
  }
}

<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>

Ludevik 6 年前

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);
        }
    });
}

现在添加 required FormControl 您可以使用此功能:

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

你可以打电话 addRequiredValidators 窗体组 .

Var 6 年前

用干净的方法。

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

创建包含必需字段/子字段的数组。在此数组上执行for each循环并创建表单控件。

How to add dynamically FormControl to FormGroup

或者如果你只关心 Validator.required 需要验证程序