Question

我如何通过ngClass将“ is-invalid”应用到Angular 6当前标记为ng-invalid的绑定字段。

想使用Bootstraps is-valid / is-invalid CSS类来改善表单视图。

谢谢

输入如下

<input type="text"
  id="text-input"
  name="text-input"
  class="form-control"
  placeholder="Provide a Name"
  formControlName="elementName"
  [(ngModel)]="stepName">

Answer 1

您可以尝试这样：

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

请参考ngClass使用评估表达式here部分。可能会有帮助。

Answer 2

请尝试这个。

  private isFieldValid(field: string) {
    let control = this.form.get(field);
    return !control.valid && control.touched;
  }
 
  private displayFieldCss(field: string) {
    let result : boolean;
    result = this.isFieldValid(field);
    return {
      'has-error'   : result,
      'has-feedback': result
    };
  }

<div [ngClass]="displayFieldCss('elementName')">
    <input type="text"
      id="text-input"
      name="text-input"
      class="form-control"
      placeholder="Provide a Name"
      formControlName="elementName"
      [(ngModel)]="stepName">
</div>

或

<input type="text"
id="text-input"
name="elementName"
class="form-control"
placeholder="Provide a Name"
formControlName="elementName"
[ngClass]="{'is-invalid': form.controls.elementName.invalid && form.controls.elementName.touched}">

如何在ng6中使用ngClass将字段标记为有效/无效

2 个答案: