向 mat 表单字段添加验证答案

【问题标题】：Adding validation to the mat form field向 mat 表单字段添加验证
【发布时间】：2022-01-28 18:14:26
【问题描述】：

我正在使用以下代码在 mat 表单字段中设置错误：

<mat-form-field appearance="fill">
  <mat-label> {{ Email }}</mat-label>
  <input formControlName="email">
  <mat-error *ngIf="service.form.get('email').hasError('maxlength')">{{ 'Display.messageLength' }}</mat-error>
  <mat-error *ngIf="service.form.get('email').hasError('required')">{{ 'Display.requiredMessage' }}</mat-error>
</mat-form-field>

现在我想在表单加载时添加另一个错误。当我想显示错误时，我在 ngOnInit() 中有一个标志。添加第三个 mat-error ，错误不可见。我浏览了stackoverflow并尝试了以下操作：

ngOnInit() {
formData.form.controls['email'].setErrors({'flag': true});
}

并在 html 中添加以下代码

  <mat-form-field appearance="fill">
      <mat-label> {{ Email }}</mat-label>
      <input formControlName="email">
      <mat-error *ngIf="service.form.get('email').hasError('maxlength')">{{ 'Display.messageLength' }}</mat-error>
      <mat-error *ngIf="service.form.get('email').hasError('required')">{{ 'Display.requiredMessage' }}
    <mat-error *ngIf="!email.valid">{{email.errors| json}">{{ 'Display.requiredMessage' }}
</mat-error>
    </mat-form-field>

我的服务代码如下：

 form: FormGroup = new FormGroup({
email: new FormControl('', [Validators.maxLength(10), Validators.required]),
});

页面加载时仍然没有得到任何东西。我该怎么做？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

email 表单控件应在ngOnInit 中标记为touched，以便验证器开始检查规则，如：
ngOnInit(): void { formData.form.controls['email'].markAsTouched(); }

您可以在此处阅读有关 FromControl 属性的更多信息：https://angular.io/api/forms/AbstractControl

【讨论】：

如果您在代码中提供了一个 stackblitz 示例，那会容易得多，但是我已经从 Angular Material 示例中创建了一个示例：stackblitz.com/edit/angular-ren9gd，当组件初始化时会显示错误如果未输入电子邮件。请注意，stackblitz 示例运行 Angular 9，可能需要进行一些调整。我希望它有所帮助。

【解决方案2】：

像这样尝试 hasError('flag')

<mat-error *ngIf="service.form.get('email').hasError('flag')">{{ 'Display.requiredMessage' }}

【讨论】：

【解决方案3】：

在您的表单组 Validators 规则中，Validators.required 意味着用户可以输入任何内容，只要它不是空字段，就不会失败。放入 Validators.email，以确保以电子邮件格式进行验证
您可以从中学习和学习
表格：

<div class="form-group">
                <mat-form-field>
                    <mat-label>{{ 'AUTH.INPUT.EMAIL' | translate }}</mat-label>
                    <input matInput type="email" placeholder="{{ 'AUTH.INPUT.EMAIL' | translate }}" formControlName="email" autocomplete="off"/>
                    <mat-error *ngIf="isControlHasError('email','required')">
                        <strong>{{ 'AUTH.VALIDATION.REQUIRED_FIELD' | translate }}</strong>
                    </mat-error>
                    <mat-error *ngIf="isControlHasError('email','email')">
                        <strong>{{ 'AUTH.VALIDATION.INVALID_FIELD' | translate }}</strong>
                    </mat-error>
                    <mat-error *ngIf="isControlHasError('email','minlength')">
                        <strong>{{ 'AUTH.VALIDATION.MIN_LENGTH_FIELD' | translate }} 3</strong>
                    </mat-error>
                    <mat-error *ngIf="isControlHasError('email','maxlength')">
                        <strong>{{ 'AUTH.VALIDATION.MAX_LENGTH_FIELD' | translate }} 320</strong>
                    </mat-error>
                </mat-form-field>
            </div>

ts 文件中的表单验证器：

email: ['', Validators.compose([
                Validators.required,
                Validators.email,
                Validators.minLength(3),
                Validators.maxLength(320)
            ]),
            ],

【讨论】：

@user12281262 你能在stackblitz上发布你的项目吗

【解决方案4】：

适合我的解决方案：

在ts文件中

public checkoutForm = this._FormBuilder.group({
   control: ['', Validators.required],
});
get f() { return this.checkoutForm.controls; }

在 HTML 文件中

<mat-label>mon label <span *ngIf="f.control.errors && f.control.errors.required" class="color-red">*</span></mat-label>

我只是偶然测试了这个解决方案，因为我以同样的方式显示错误。只要该字段未填写，此代码就会显示星号。

【讨论】：