Angular *ngIf 未使用组件方法更新答案

【问题标题】：Angular *ngIf not updated with component methodAngular *ngIf 未使用组件方法更新
【发布时间】：2020-04-24 20:50:14
【问题描述】：

当使用*ngIf 显示/隐藏函数时，该块不会在 html 中更新。渲染块以检查值（{{contactInfoValid(contact)}}）时，它已正确更新，*ngIf 未被触发

HTML

<mat-form-field>
            <input matInput  type="text"
                      [(ngModel)]="contact.info" required>               
            <mat-error *ngIf="contactInfoValid(contact) == false">
               email not correct
            </mat-error>
        </mat-form-field>

组件

  contactInfoValid(contact) {
    if (contact.hasValidInfo) {
       return true;
       }

    return false;
  }

mat-error 从未显示。

在这种特定情况下不能使用 FormControl，因为它用于动态网格中

【问题讨论】：

你能提供一个minimal example 你的问题吗，例如在 stackblitz 上？
@MikeS。 angular-yhj6mj.stackblitz.io
在示例中犯了错误，问题未重现。可能在别处

标签： angular angular-ng-if

【解决方案1】：

<mat-error> 组件需要ErrorStateMatcher 才能显示任何内容。这里有一篇很好的文章； https://itnext.io/materror-cross-field-validators-in-angular-material-7-97053b2ed0cf

简而言之，您需要在要验证的表单字段上指定[errorStateMatcher]="myErrorStateMatcher"。

<mat-form-field>
   <input matInput type="text" [(ngModel)]="contact.info" required
        [errorStateMatcher]="myErrorStateMatcher">
   <mat-error *ngIf="contactInfoValid(contact) == false">
       email not correct
   </mat-error>
</mat-form-field>

通常 ErrorStateMatcher 与 FormControls 一起使用，但如果您想使用 ngModel，您可以提供自定义 ErrorStateMatcher，它可以访问您需要的数据以显示错误消息。下面是一个简化的例子；

export class RuleErrorStateMatcher<T> implements ErrorStateMatcher {
    constructor(private editControl: IValidatableEditControl<T>) { }

    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        return this.editControl && this.editControl.model && !this.editControl.model.isValid;
    }
}

export interface IValidatableEditControl<T> {
    model: ValidationGeneric<T>;
}

export class ValidationGeneric<T>   {
    public value: T;
    public isValid: boolean;
}

如果您尝试使用 mat-error 以外的其他 html 标签，您将看到您的 ngIf 可能正在工作；

<span *ngIf="contactInfoValid(contact) == false">
        email not correct
</span>

【讨论】：

尝试了跨度并且有效，这似乎是我的问题。我会尝试修复然后接受你的回答:)

【解决方案2】：

它可能是按照here 描述的设计

解决方法是像这样添加 FormControl，而不是绑定到 [(ngModel)]

email = new FormControl('', [Validators.required, Validators.email]);

<div class="example-container">
  <mat-form-field appearance="fill">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="pat@example.com" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>

【讨论】：