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

Question

我正在为输入字段创建一个可重用的组件。我在打字稿文件中创建了一个名为 "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;

请检查example

Answer 2

将 !IsValid 更改为 IsValid。它会起作用

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

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

Validation using if statement using input binding in Angular

html

inputbinding

typescript

angular