Question

我有一些输入字段，其中设置了不同的验证规则。但是我也想在提交时立即对所有字段添加一些验证，或者，如果上面有任何错误，请禁用提交按钮。

但是，我从一开始就没有将所有输入都放在form标签中，现在有点麻烦了。我不熟悉这一切，所以能请您帮帮我吗？有什么方法可以解决它，而无需重新创建所有表单？：（

我尝试添加：

dict

但这没有帮助...

我的代码如下：

HTML

  <form #stepOneForm="ngForm">

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

TS

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

谢谢您，很抱歉提出新问题！ ;）

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 (?.)来解决它们之间的主要区别，这就像您说“首先进行干草角度检查（如果有错误（不是unll或undefined），然后检查所需的错误类型，maxLength。 .etc”的主要目的是防止javascript引发错误cannot read property供参考safe navigation operator

或（另一个验证案例）

*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 Template Forms

Angular 6 + Angular Material-提交时进行表格验证

1 个答案: