Угловая 5 - условно обязательная текстовая область

Question

Если флажок установлен, то текстовая область появляется и требуется [обязательно] = "otherVendorsChecked == true? True: false" Если я установил флажок и затем снял флажок, ввод текста еще требуется. Кто-нибудь знает, что я делаю не так?

<div>
    <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="otherVendorsChecked">Other option:</mat-checkbox>
</div>
<mat-form-field *ngIf="otherVendorsChecked == true">
    <textarea matInput formControlName="otherVendors" [required]="otherVendorsChecked == true ? true : false"></textarea>
</mat-form-field>

[EDIT]

Если я удаляю * ngIf = "otherVendorsChecked == true" , это работает нормально. Я предполагаю, что mat-form-field удаляется только с условием ngIf и, следовательно, больше не влияет на требуемое свойство.

Это моя форма в ngOnInit:

this.form = new FormGroup({
  otherVendors: new FormControl('', [Validators.minLength(2)]),
  ...
});
this.fillForm();

и в моей fillForm у меня есть этот код:

this.form.controls['otherVendors'].setValue(this.lastFacilityDetailOfCalendarEvent.otherVendors);
    if(this.lastFacilityDetailOfCalendarEvent.otherVendors != null && this.lastFacilityDetailOfCalendarEvent.otherVendors.length > 0) {
      this.otherVendorsChecked = true;
    }

Answer 1

[Отредактировано]

Наконец, после небольшого количества экспериментов, я вижу, что это все из-за <mat-form-field *ngIf="otherVendorsChecked == true">.

Каждый раз, когда вы меняете otherVendorsChecked значение, FormControl будет переключаться между обязательно и не требуется. Когда otherVendorsChecked имеет значение true, ваш FormControl будет изменен на обязательный, а когда otherVendorsChecked изменен на false, дажеперед обновлением FormControl до не требуется *ngIf удалит элемент textarea из DOM, прежде чем инициировать событие изменения FormControl, поэтому теперь FormControl не имеет идеи сделать его не обязательным .

Для быстрого исправления, вместо использования *ngIf Вы можете просто скрыть этот раздел / элемент из вида, возможно, используя display: none; или что-то в этом роде.

Надеюсь, это поможет.