Как можно установить Validators.required один раз, когда все поля формы обязательны для заполнения в Реактивной форме?

Question

угловой v 4.4.3.

В Реактивной форме мы можем написать 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 на каждомполе формы.

Поэтому я ищу любое решение / метод углового FormBuilder / FormControl, который устанавливает все обязательные поля и может устанавливать валидатор дополнения на поле при необходимости.

Answer 1

Вы можете создать 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 2

перейти с чистого подхода.

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

создать массив с обязательными полями / подполями.выполните для каждого цикла над этим массивом и создайте элементы управления формой.

Например: Как динамически добавить FormControl в FormGroup

ИЛИ, если вы заботитесь только о Validator.required- тогда ответ @ Ludevik - лучший вариант, но это будет дополнительная работа для угловых - сначала вы определяете элементы управления формами, затем вы определяете Validator.required

Answer 3

Вы можете написать функцию для глубокой итерации по 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 после создания FormGroup.