Question

我创建了一个自定义指令，其中几个输入属性具有绑定值。我试图通过如下方法绑定其中一个属性。但是当父组件加载或对父组件进行任何更改时，它会多次调用。我的指示如下

@Directive({
  selector: '[my-error]', exportAs: 'my-error',
  providers: []
})

export class UsErrorComponent implements OnInit, OnDestroy {
  @Input() errorMsg: string;

  private displayError: boolean;

  @Input('displayError') set $displayError(value: boolean) {
    this.displayError = value;
    if (this.displayError) {
       console.log("Display error")
    } else {
       console.log("Close Display error")
    }
  }
  @Input() placement: 'top' | 'bottom' | 'left' | 'right';

}

父组件HTML

<div class="form-group">
      <div class="col-sm-12">
        <label for="name" class="control-label required">Name</label>
        <input type="text" id="name" class="form-control" formControlName="name" my-error [displayError]="isFieldValid('name')" [errorMsg]="formErrors.name"
          placement="right">

      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-12">
        <label for="email" class="control-label required">Email</label>
        <input type="text" id="email" class="form-control" formControlName="email" my-error [displayError]="isFieldValid('email')"
          [errorMsg]="formErrors.email" placement="right">

      </div>
    </div>

Component.ts isFieldValid 方法如下

isFieldValid(field: string) {
    console.log(field);
    return !this.myForm.get(field).valid && this.myForm.get(field).touched;
  }

我的问题是 isFieldValid 意外多次调用。

Angular 2自定义指令通过方法意外行为绑定属性

0 个答案: