Обновление FormControl после добавления обязательного атрибута динамически с помощью [attr.required]

Question

У меня есть один вход, определенный как FormControl и связанный с ngModel . Это выглядит следующим образом:

HTML:

<!-- If this input is empty the POB input should be required -->
<input type="text"
           id="addrs_house"
           name="addrs_house"
           #addrs_house="ngModel"
           required
           [ngStyle]="{hasError:addrs_house.invalid)}"
           [(ngModel)]="model.house">
 <!-- This input is dynamicaly required, dependant on the house input -->        
<input type="text"
           id="addrs_po"
           name="addrs_po"
           [(ngModel)]="model.pob"
           #addrs_po="ngModel"
           [attr.required]="model.house ? null : ''"
           [ngStyle]="{hasError:addrs_po.invalid}">

TS:

// In the component Im refencing the FormInput model as so
@ViewChild('addrs_po') addrs_po: ElementRef;

Проблема:
Атрибут required добавляется к входу POB , но ngModel FormControl не обновляется соответственно с объектом ошибок.

Answer 1

Вы должны использовать привязку свойства, а не привязку атрибута:

[required]="!model.house"

Это правильно обновит требуемое состояние