Angular * ngIf не обновляется методом компонента - PullRequest
Новая
       31

Angular * ngIf не обновляется методом компонента

1 голос
/ 24 апреля 2020

При использовании функции для показа / скрытия с *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 не может использоваться в этом конкретном случае c, поскольку он используется в динамической c сетке

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Компонент <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;
}

Если вы попробуете другой тег html, чем mat-error, вы увидите, что ваш ngIf, вероятно, работает; 

<span *ngIf="contactInfoValid(contact) == false">
        email not correct
</span>
0 голосов
/ 24 апреля 2020

это может быть разработано, как описано здесь

Обходной путь - это добавить 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>
...