Добавить проверку динамически для ввода ngModel

Question

Я использовал NgForm для динамического добавления валидатора к входу

У меня есть кнопка setValidation для установки валидации для ввода, в первом примере все работает хорошо, но во втором примере, когда я добавляю formGroup, я получаю ошибка ниже, когда я нажимаю кнопку setValidation

Невозможно прочитать свойство 'setValidators' с нулевым значением

@ViewChild('f') myForm: NgForm;
coumNameModel;

setValidation() {
  this.myForm.form.get('coumnName').setValidators([Validators.required, Validators.pattern("^[0-9]*$"), Validators.minLength(2), Validators.maxLength(2)]);
  this.myForm.form.get('coumnName').updateValueAndValidity();
}

первый пример

<form #f="ngForm">
    <input type="text" [(ngModel)]="coumnNameModel" name="coumnName" #coumnName="ngModel">
</form>
<p *ngIf="!myForm.form.get('coumnName')?.valid">
    <i class="icons icon-cancel color-error"></i>
    <small class="color-error">Invalid</small>
</p>
<button (click)="setValidation()">Set Validation</button>

второй пример

<form [formGroup]="generalInformationForm" #f="ngForm">
    <input type="text" [(ngModel)]="coumnNameModel" name="coumnName" #coumnName="ngModel" gDefaultControl
        [ngModelOptions]="{standalone: true}">
</form>
<p *ngIf="!myForm.form.get('coumnName')?.valid">
    <i class="icons icon-cancel color-error"></i>
    <small class="color-error">Invalid</small>
</p>
<button (click)="setValidation()">Set Validation</button>

Answer 1

Это потому, что вы использовали formGroup и ngForm в одной форме, чего не должно быть.

Используйте любой из них. Я рекомендую вам использовать реактивные формы, т.е. formGroup

Answer 2

Согласно angular документирование директива ngForm будет инициализирована с явной ясностью, когда нет formGroup или ngNoForm.

**Selectors**
   form:not([ngNoForm]):not([formGroup])
   ng-form
   [ngForm]

Во втором примере вы использовали реактивную форму. Таким образом, вы должны использовать метод get для доступа к информации о данном элементе управления следующим образом.

setValidation() {
  this.generalInformationForm.get('professionType').setValidators([Validators.required, Validators.pattern("^[0-9]*$"), Validators.minLength(2), Validators.maxLength(2)]);
  this.generalInformationForm.get('professionType').updateValueAndValidity();
}