Angular *ng如果没有使用组件方法进行更新

当使用函数showhide与 *ngIf 在渲染该块时,检查该块的值({{contactInfoValid(contact)}})正确更新,则 *ngIf 没有被触发

超文本标记语言

<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,因为它是在一个动态网格中使用的。

解决方案:

<mat-error> 器件 ErrorStateMatcher 以便显示任何东西。这里有一篇关于这方面的文章很好。https:/itnext.iomaterror-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;
}

如果你尝试其他html标签,而不是mat-error,你会看到你的ngIf可能是工作的。

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

将Pyspark RDD转换为Pandas数据框架。

2022-9-9 1:50:22

未分类

从Neo4J 3.3.3社区版升级到Neo4J 3.5企业版。

2022-9-9 2:01:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索