Как включить обязательное текстовое поле для отправки только в приложении Angular 5?

Question

У меня есть следующий шаблон с текстовым полем:

<input type="checkbox" id="s_i{{i}}" name="s_i{{i}}" (change)="clickObj($event, myObjs[i])" [(ngModel)]="myObjs[i].isSelected">
<input type="text" [ngModelOptions]="{ updateOn: 'blur' }" [required]="myObjs[i].isSelected"
 id="f_p_{{i}}" name="p_p_{{i}}" [(ngModel)]="myObjs[i]">

При нажатии на флажок текстовое поле автоматически становится красным и не дает пользователю возможности ввести значение.Мне нужно пометить ошибку только при нажатии кнопки Отправить.Любая идея, что я должен изменить / добавить, чтобы исправить это?Спасибо.

Answer 1

Вам необходимо создать логическую переменную, которая будет определять, будет ли поле обязательным.

в ТС:

submitClicked:boolean = false;
....
toggleSubmitClicked(){
    this.submitClicked = ! this.submitClicked
}

Затем в HTML:

[required]="submitClicked && myObjs[i].isSelected" 
   (submit)="toggleSubmitClicked()"  (click)="toggleSubmitClicked()"