Question

看着Angular Material演示，我不禁注意到TS文件中的Validators（例如，必需）还要求将必需的元素添加到HTML的input元素中。我了解这是来自Angular Material Documentation：

警告：将这些HTML5验证属性与 Angular的反应式提供的内置验证器。使用这些组合可防止在表达式后更改表达式时出错模板已检查。

这是一个类似的问题to this question，除了我想知道是否可以提取HTML中的验证器以自动添加字段，如果可以，怎么办？

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>

在HTML中，输入行以单词required结尾。我想要做的是通过检查表单组的电子邮件字段以某种方式提取它，如果email = new FormControl('', [Validators.required, Validators.email]);具有必需的验证器，则将单词required添加到<input> HTML标记中，因此我不必每次都进行更改，而不必冒险失去同步。

然后我可以做其他事情，例如最小和最大长度等。

Answer 1

如果您使用的是ReactiveForms，则无需在HTML中放置任何验证器。所有验证都可以在ts文件中完成。

这是一个登录表单的示例，其中所有验证都在ts文件中。

this.loginForm = this.fb.group({
  mobile: [
    null,
    Validators.compose([
      Validators.required,
      Validators.min(1000000000),
      Validators.pattern("^[0-9]*$")
    ])
  ],
  otp: [null, Validators.compose([
        Validators.required,
        Validators.maxLength(6),
        Validators.minLength(4)])],
});

在HTML

<form [formGroup]="loginForm" (ngSubmit)="login()">

            <mat-form-field >
              <input  matInput type="tel" placeholder="Mobile Number" [formControl]="loginForm.controls['mobile']"
                >
              <mat-error
                *ngIf="loginForm.controls['mobile'].hasError('required') && ( loginForm.controls['mobile'].dirty === true || loginsubmitted === true )">
                Mobile number is <strong>required</strong>
              </mat-error>
              <mat-error
                *ngIf="loginForm.controls['mobile'].hasError('min') && ( loginForm.controls['mobile'].dirty === true || loginsubmitted === true )">
                Mobile number must contain <strong>10 digits</strong>
              </mat-error>
              <mat-error
                *ngIf="loginForm.controls['mobile'].hasError('pattern') && ( loginForm.controls['mobile'].dirty === true || loginsubmitted === true )">
                Invalid Mobile Number
              </mat-error>
            </mat-form-field>



            <mat-form-field >
              <input matInput type="password" placeholder="Enter OTP"
                [formControl]="loginForm.controls['otp']">
              <mat-error
                *ngIf="loginForm.controls['otp'].hasError('required') && ( loginForm.controls['otp'].dirty === true || loginsubmitted === true )">
                OTP is <strong>required</strong>
              </mat-error>
            </mat-form-field>


            <button>LOGIN</button>
          </div>
        </form>

角材料反应形式在HTML mat-form-field中使用验证器

1 个答案: