使用在Angular中使用输入绑定的if语句进行验证

Question

我正在为Input字段创建一个可重用组件。我在typescript文件中创建了一个名为"IsValid"的布尔标记来显示验证消息。

我的打字脚本文件

export class InputControlsComponent implements OnInit {
@Input() IsValid;
@Input() className;
@Input() controlName;
@Input() inputType;
constructor() { }
ngOnInit() {
}
}

Html文件

<div>
<input type="{{inputType}}" class="{{className}}" >
<span class="error-message" *ngIf="!IsValid">This Field is required</span>
</div>

是如何使用的

<div>
<label>Name</label>
<app-input-controls  inputType="text"  controlName="Address" className="form-control" IsValid = "false">
</app-input-controls>
</div>

我可以更改typescript文件的布尔标记的值，但错误消息不会随着布尔标记的更改而更改。

Answer 1

您可以使用类似[(IsValid)]、的ngModel

如果使用ngModel，则模型是双向绑定的。

例如，设置你的html

<app-input-validation  [inputType]="'text'"  [controlName]="Address" [className]="form-control" [(IsValid)]="isValidDate">
</app-input-validation>

您可以随时在父组件上设置isValid属性。

仅写入this.isValidText=true;

请检查示例

Answer 2

更改！IsValid到IsValid。它将工作

<div>
<input type="{{inputType}}" class="{{className}}" >
<span class="error-message" *ngIf="IsValid">This Field is required</span>
</div>