html - 使用 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>

我能够更改打字稿文件的布尔标记的值，但错误消息在更改布尔标记时没有改变。

Answer 1

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

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

Answer 2

您可以使用 ngModel 之类[(IsValid)]的，

如果你使用ngModel，你的模型是绑定两种方式。

例如设置你的 html

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

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

只写this.isValidText=true;

请检查示例