Question

我有一个input字段。该字段不应为空。如果是，我希望将Bootstrap的is-invalid类分配给它。我面临的问题是，如果我只是点击该字段，不要键入任何内容然后离开该字段，该字段不会变为红色（has-error不会被分配到该字段）。但是，如果我输入内容并将其完全删除然后离开该字段，该字段将变为红色。

HTML是

<input id="firstname" type="text" class="form-control" formControlName="firstName" [ngClass]="validateField('firstName')" (blur)="setFieldStatus('firstName')" required>

.ts是

  validateField(field:string){
    console.log("validating field: " +field)
    return this.helper.displayFieldCss(this.signupForm,field);
  }

 /*mark a control field as touched on losing focus from that field.*/
  setFieldStatus(field:string){
    console.log("inside setFieldStatus for field "+field)
    const control = this.signupForm.get(field);         
      if (control instanceof FormControl) {             
        control.markAsTouched({ onlySelf: true }); 
      }
  };

helper.ts

 displayFieldCss(form: FormGroup, field: string) {
    console.log("in displayFieldCss for field "+field);
    if(!form.get(field).pristine) { //check for validity only if the user has interacted with the field. Without this check, the default field will have red border.
      let fieldValid: boolean = form.get(field).valid;
      return {
        'is-invalid': !fieldValid, // if fieldvalid returns false i.e. field is not valid then we want has-error css. So set it to true (opp. of fieldValid)
        'is-valid': fieldValid //if fieldvalid returns true i.e. field is valid then we want has-success css. So set it to true (value of fieldValid)
        //'has-feedback': this.isFieldValid(field)
      }
    } else {//if field is pristine (not touched by user at all) then dont display error or success
      return {
        'is-invalid': false, // if field is pristine (not touched by user at all) then dont display error or success
        'is-valid': false//if field is pristine (not touched by user at all) then dont display error or success
      }
    }
  }

我的逻辑是，在模板中，ngClass获取is-valid或is-invalid，具体取决于用户是否与字段进行了互动。我不希望在表单加载时该字段为红色（原始检查句柄）

当用户离开该字段时，我标记字段touched。现在，我可以看到在创建字段时[ngClass]被分配但在调用(blur)时没有更新的问题。我需要在触发[ngClass]时更新(blur)，但不知道如何操作。 blur在组件类中处理，而[ngClass]在HTML中。

Answer 1

使用Renderer2以编程方式在class事件上设置组件的blur属性：

模板（html）

<my-element (blur)="onBlur()"></my-element>

组件类（ts）

@ViewChild('my-element', {read: ElementRef}) el: ElementRef;
constructor(private renderer: Renderer2) {}

onBlur() {
  const classVal = some condition ? 'is-valid' : 'is-invalid';
  this.renderer.setAttribute(this.el.nativeElement, 'class', classVal);
}

您可以将this.renderer.setAttribute...行添加到当前在blur上运行的函数中。您还可以使用其他方法，例如addClass和removeClass - 我已将上述API链接起来。

Answer 2

我能够解决问题。我应该检查触摸而不是原始状态。 stackoverflow.com/questions/25025102/...。改变了displayFieldCss中的条件和快乐的日子！也不需要模糊检查。

如何以编程方式将css类分配给表单控件

2 个答案: