Ошибка возврата появляется при сбросе формы angular-material

Question

В моем проекте angular 6 я использовал mat-error of angular-material для отображения ошибки:

<form class="custom-form" name="deal-form">
     <mat-form-field class="full-width">
        <input name="id" type="number" min="0" matInput placeholder="Id" 
            [formControl]="id" required [(ngModel)]="deal.deal_id">
        <mat-error *ngIf="id.invalid">{{getMandatoryErrorMessage()}}</mat-error>
    </mat-form-field>

    <button mat-raised-button color="primary" *ngIf="!isEdit" (click)="save()">Save</button>
</form>

После нажатия кнопки «Сохранить» я сохраняю данные и очищаю «Сбросить форму».Вот мой файл .ts:

import { Component, OnInit } from '@angular/core';
import {FormControl, Validators, AbstractControl} from '@angular/forms';

@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.css']
})
export class DealsComponent implements OnInit {
resetObj(){
        this.deal = new Deal();
    }

save(){
        if(this.validateFields() && !this.invalidSku){
            this.dealService.createDeal(this.deal)
                .subscribe(data=>{
                    this.resetObj();
                })
        }
    }
}

После сброса объекта я получаю ошибку mat в полях формы.Несмотря на то, что данные сохранены должным образом, ошибка mat не должна появляться на четких данных.Может кто-нибудь предложить мне способ решить эту проблему.

Answer 1

Хорошо, позвольте мне объяснить, как работает свойство invalid:

Вы определили независимое formControl или включили в formGroup, затем вы устанавливаете значение и список Валидаторы как: требуется, мин, электронная почта, и т. д.если значение не соответствует этим валидаторам, оно все равно будет invalid.

Как насчет mat-error?

mat-error (по умолчанию)после того, как пользователь коснется поля.

Что произошло в вашем случае?

В вашем случае вы используете ngModel и FormControl, чтобы передать значениеиспользование ngModel и обработка ошибок FormControl, что совершенно неправильно;потому что вы сбрасываете значение, но не сбрасываете FormControl, поэтому коснулось и invalid, тогда будет отображаться ошибка.

Как ее решить?

Удалите ngModel из input и объявите formControl с именем id со значением идентификатора сделки:

id: FormControl;

resetObj(){
    this.deal = new Deal();
    id = new FormControl(this.deal.deal_id, [Validators.required, Validator.min(0)]);
}

В этом случае при сбросе значения, вы снова сбросите formControl, что означает, что он будет помечен как нетронутым ;поэтому ошибка с матом исчезнет.

BTW ;Вы можете объявить несколько mat-error, что каждый из них предназначен для определенного валидатора вместо общего свойства invalid, например:

<mat-error *ngIf="id.errors?.required">ID is required field</mat-error>
<mat-error *ngIf="id.errors?.min">Minimum value is 0</mat-error>