Angular 角度材质反应表单使用HTML mat表单字段中的验证器

查看Angular Material演示，我不禁注意到TS文件中的验证器（例如所需的验证器）也需要将所需的元素添加到HTML中的输入元素中。我理解这是来自：

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

这是一个类似的问题，只是我想知道我是否可以提取HTML中的验证器来自动添加字段，如果可以，怎么做

从

在HTML中，输入行以单词required结尾。我想做的是通过检查formgroup的email字段来提取它，如果email=newFormControl，[Validators.required，Validators.email]；具有所需的验证器，然后将单词required添加到HTML标记中，这样我就不必每次都更改它并冒着它们不同步的风险

---

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

如果您使用的是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和angular进行验证。这不是多余的吗？如果使用ReactiveForms，而不是put required，只需使用Validators.required根据问题，Angular团队建议使用，如突出显示的部分所示。因为它是多余的，我也相信，我想包装的功能，这就是为什么我试图做的变化，我问。另外，Angular Material需要必需的元素来向字段添加星号*。我意识到反应形式具有在代码中进行验证的能力。但是，根据Angular Material文档，Angular Material团队仍然建议使用其他HTML元素。因此，这就是我试图通过代码添加这些内容的原因，这样我就可以在周围创建一个包装器，只允许在Typescript代码中设置字段。

<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>