如何仅在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

您需要创建一个布尔变量，该变量将确定是否需要该字段。

在TS中：

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

然后用HTML：

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