Angular - FormBuilder.group не принимает массив валидаторов

Question

Я пытался использовать дополнительную карту параметров, предоставляемую Angular FormBuilder

group(controlsConfig: {
    [key: string]: any;
}, extra: {
    [key: string]: any;
} | null = null): FormGroup

Документы: FormBuilder

Но перед

this.validator не является функцией

Если я передам один валидатор вместо массива, вышеуказанная ошибка исчезнет, ​​но валидация не произойдет?

Может ли кто-нибудь помочь мне с этим или предоставить правильный способ использования дополнительного параметра карты?

Мой компонент и соответствующий ему шаблон выглядит следующим образом:

app.component.ts

import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  formGroupNew: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.formGroupNew = this.fb.group(
      { name:  "Provide name"}, 
     { validator: [Validators.required, Validators.maxLength(5)] } );
  }

  validate() {
    console.log(this.formGroupNew.controls["name"].status);
  }
}

app.component.html:

<div class="container" [formGroup]="formGroupNew">
  <input class="form-control" formControlName="name">
  <button (click)="validate()">Validate</button>
</div>

Answer 1

Когда вы делаете fb.group({...}, {validator: fn})первый аргумент - это элементы управления группы, а второй - параметры конфигурации самого объекта группы, а не содержащиеся в нем элементы управления.

Ошибка вызвана тем, что метод ожидает получить функцию вместо массива в соответствии с src.

ValidatorFn что вы можете пройти там будет применяться к FormGroup объект, так что вы можете создавать пользовательские функции для проверки условий на нескольких элементах управления в группе. По этой причине не имеет смысла передавать что-то вроде Validators.length(5), поскольку значение группы является объектом (как бы вы проверили это условие по отношению к объекту?). Напротив, Validators.required имеет смысл, так как значение может быть нулевым, когда не установлены все элементы управления.

Допустим, у вас есть две пользовательские функции валидатора: CustomValidatorFnOne, CustomValidatorFnTwo и вы хотите применить их к группе плюс необходимые. Вы могли бы сделать что-то вроде:

fb.group({...}, {
   validator: Validators.compose(
      [
          CustomValidatorFnOne, 
          CustomValidatorFnTwo,
          Validators.required
      ]
   )
})

Таким образом, вы объединяете все свои валидаторы в одну функцию.