Угловой 6 + Угловой материал - проверка формы при отправке

Question

У меня есть несколько полей ввода с различными правилами проверки. Но я также хочу добавить некоторые проверки сразу ко всем полям при отправке или отключить кнопку отправки, если есть какие-либо ошибки выше.

Тем не менее, я не поместил все свои входные данные в тег формы с самого начала и сейчас испытываю некоторые проблемы с этим. Я новичок во всем этом, так что вы можете мне помочь? Есть ли способ ее решить, не воссоздав все формы? (

Я пытался добавить:

  <form #stepOneForm="ngForm">

  <button type="submit [disabled]="!stepOneForm.form.valid" mat-button matStepperNext>Go to next step</button>

Но это не помогло ...

Мой код выглядит так:

HTML

      <!-- Name -->
      <mat-form-field class="dcp-input-field">
        <input matInput placeholder="Name" [formControl]="name" [errorStateMatcher]="matcher">
        <mat-hint>Please enter your name</mat-hint>

        <mat-error *ngIf="name.hasError('required')">
          This is <strong>required</strong> field
        </mat-error>
      </mat-form-field>

      <!-- DoB -->
      <mat-form-field class="dcp-input-field">
        <input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="dob" [errorStateMatcher]="matcher">
        <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
        <mat-datepicker #dp></mat-datepicker>
        <mat-hint>Please enter your date of birth</mat-hint>

        <mat-error *ngIf="dob.hasError('required')">
          This is <strong>required</strong> field
        </mat-error>
      </mat-form-field>

      <!-- PolicyNo -->
      <mat-form-field class="dcp-input-field">
        <input matInput placeholder="Policy number" [formControl]="policyNo" [errorStateMatcher]="matcher">
        <mat-hint>Please enter your Policy number</mat-hint>

        <mat-error *ngIf="policyNo.hasError('required')">
          This is <strong>required</strong> field
        </mat-error>
        <mat-error *ngIf="policyNo.hasError('minlength')">
          The value is <strong>too short</strong>
        </mat-error>
      </mat-form-field>

TS

 export class MyErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(
     control: FormControl | null,
     form: FormGroupDirective | NgForm | null
   ): boolean {
     const isSubmitted = form && form.submitted;
     return !!(
       control &&
       control.invalid &&
       (control.dirty || control.touched || isSubmitted)
     );
   }
 }


  name = new FormControl("", [Validators.required]);
  dob = new FormControl("", [Validators.required]);
  policyNo = new FormControl("", [
    Validators.required,
    Validators.minLength(6)
  ]);

  matcher = new MyErrorStateMatcher();

Спасибо и извините за вопрос нуба! ;)

Answer 1

HTML
обернуть все ваши входные данные в form тег

вместо

<form #stepOneForm="ngForm">

сделать

<form (ngSubmit)="onSubmit()" [formGroup]="myForm"></form>

вместо

<input matInput placeholder="Name" [formControl]="name" [errorStateMatcher]="matcher">

сделать

<input matInput placeholder="Name" formControlName="name">

, который идет со всеми входными данными formControlName, а не [formControl]

вместо

<button type="submit [disabled]="!stepOneForm.form.valid" mat-button matStepperNext>Go to next step</button>

сделать

<button type="submit" [disabled]="myForm.invalid" mat-button matStepperNext>Go to next step</button>

- при попытке показать сообщение об ошибке для доступа к проверке ошибок ввода
вместо

name.hasError('required')

сделать

myForm.get('name').errors?.required
//or
myForm.get('name').errors['required']

оба способа проверки ошибок сработают в основном по-разному между ними, используя safe navigation operator (?.), это как если бы вы сказали «сначала проверьте hay angular, если есть ошибка (не unll или undefined), затем проверьте тип требуемой ошибки, maxLength ... и т. Д. «главная цель - предотвратить появление ошибки JavaScript cannot read property для справки оператор безопасной навигации

или (другой случай проверки)

*ngIf="myForm.get('name').invalid && myForm.get('name').touched"

TS

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...']
})
export class myApp implements OnInit {
  myForm: FormGroup;

  ngOninit() {
    this.myForm = new FormGroup({
      'name': new FormControl(null, Validators.required),
      'policyNo': new FormControl(null, validators.minLength(5))
      // the rest of inputs with the same approach
    });
  }

  onSubmit() {
    // when submit the form do something
  }
}

вы используете здесь reactive forms не template driven каждый использует по-разному, убедитесь, что вы используете правильный путь для обоих, потому что вы путаете reactive approach с template driven approach, что все испортило. прочитайте рекомендацию Reqctive Froms Шаблоны форм