Question

我正在使用以下代码在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>

现在，我想在加载表单时添加另一个错误。当它为true时，我在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]),
});

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

Answer 1

尝试使用 hasError（'flag'）这样

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

Answer 2

在您的表单组验证者规则中，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)
            ]),
            ],

Answer 3

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

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

将验证添加到垫子表单字段

3 个答案: