Добавить динамические валидаторы FormControl, не удаляя старые - PullRequest
Новая
       36

Добавить динамические валидаторы FormControl, не удаляя старые

0 голосов
/ 05 ноября 2018

У меня есть форма, как показано ниже 

this.personForm = new FormGroup({
            title: new FormControl(this.person.salutation, Validators.compose([
            Validators.minLength(2)
        ])),
            firstName: new FormControl(this.person.firstName, Validators.compose([
            Validators.minLength(4)
        ])),
});

Основываясь на конфигурации из вызова API, я хочу сделать их динамически необходимыми или нет. Я знаю, что могу использовать formControl.setValidators([Validators.required]), но это очистит существующие валидаторы.

Я надеялся достичь этого одним из следующих способов

  • Функция простого добавления (Exp: addValidators([]))
  • ИЛИ функция, которая выдаст мне список валидаторов, которые уже есть у formControl, так что я могу присоединиться к ним с тем, что я хочу добавить. (Exp: getValidators())

К сожалению (насколько я знаю) ни одна из вышеуказанных 2 функций не существует. Так как же добавить новую валидацию в formControl, не зная уже существующих?

1 Ответ

0 голосов
/ 06 ноября 2018

Полагаю, вы можете использовать customValidator, который зависит от одной переменной. В этом примере кнопка делает переменную "все же" истинной или ложной. в зависимости от формы действителен или нет 

@Component({
  selector: 'my-app',
  template:`
  <form [formGroup]="personForm">
     <input formControlName="title"/>
     <input formControlName="firstName"/>
  </form>
  <button (click)="addValidator()">click</button>
  <hr/>
  {{personForm?.errors|json}}
  {{personForm?.valid}}`
})
export class AppComponent implements OnInit {
  yet: boolean;
  personForm: FormGroup;
  person = { salutation: "", firstName: "" }
  ngOnInit() {
    this.personForm = new FormGroup({
      title: new FormControl(this.person.salutation, Validators.compose([
        Validators.maxLength(2)
      ])),
      firstName: new FormControl(this.person.firstName, Validators.compose([
        Validators.minLength(4)
      ])),
    }, this.customValidator())
  }
  addValidator() {
    this.yet = !this.yet;
    this.personForm.updateValueAndValidity();
  }
  customValidator() {
    return (group: FormGroup) => {
      if (!this.yet)
        return null;
      if (group.get('title').value == '')
        return { title: 'required' }
    }
  }

см. stackblitz

...