Реактивные формы Angular Material используют валидаторы в поле mat-form HTML. - PullRequest
Новая
       52

Реактивные формы Angular Material используют валидаторы в поле mat-form HTML.

0 голосов
/ 23 октября 2019

Глядя на демонстрацию Angular Material, я не могу не заметить, что Валидаторы в TS-файле (например, требуется) также требуют добавления обязательного элемента в элемент ввода в HTML. Я понимаю, что это из Angular Material Documentation :

Внимание! Используйте эти атрибуты проверки HTML5 в сочетании со встроенными валидаторами, предоставленными реактивными формами Angular. Использование их в сочетании предотвращает ошибки при изменении выражения после проверки шаблона.

Этот вопрос аналогичен этому вопросу , за исключением того, что я хочу знать,можно извлечь валидаторы в 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, поэтому у меня нетменять его каждый раз и рисковать их рассинхронизацией.

Тогда я мог бы делать другие вещи, такие как минимальная и максимальная длина и т. д.

1 Ответ

1 голос
/ 23 октября 2019

Если вы используете 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>
...