Question

在我的angular 6项目中，我使用了angular-material的mat-error来显示错误：

<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-error不应出现在清晰的数据上。谁能建议我解决这个问题的方法。

Answer 1

好的，让我解释一下invalid属性的工作原理：

您定义了一个独立的formControl或包含在formGroup中，然后设置了验证者的值和列表，例如：必填，最小值，电子邮件等。如果该值与这些验证器不匹配，它将仍然invalid。

mat-error呢？

用户触摸该字段后，

mat-error将显示（默认）。

您的情况如何？

在您的情况下，您使用ngModel和FormControl，因此您使用ngModel传递值并处理FormControl的错误，这是完全错误的；导致您重置了该值，但没有重置FormControl，因此它被感动和invalid，然后将显示错误。

如何解决？

从ngModel中删除input并声明一个具有交易ID值的formControl id：

id: FormControl;

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

在这种情况下，当您重置该值时，将再次重置formControl，这意味着它将被标记为未修改；这样垫子错误就会消失。

顺便说一句；您可以声明多个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>

重置格式为角材料后，会再次出现席子错误

1 个答案: