角度 6 :- 反应式表单验证无法正常工作答案

【问题标题】：angular 6 :- Reactive form validation is not working propery角度 6 :- 反应式表单验证无法正常工作
【发布时间】：2018-09-13 18:00:03
【问题描述】：

需要关于 Angular 6 响应式表单验证，我从官方 Angular 网站研究过

我想验证我的表单并向不同的错误显示不同的错误消息

组件代码

this.pinForm = new FormGroup({
      'defaultPin': new FormControl(this.pin.oldPin, [
        Validators.required,
        Validators.minLength(4)
      ])
    });

HTML代码

<form [formGroup]="pinForm" #formDir="ngForm">

        <div class="form-group">
          <label for="defaultPin">Default Pin</label>
          {{formDir.valid}}
          <input type="text" name="defaultPin" class="form-control" id ="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
          formControlName = "defaultPin" />
          <small id="defaultPin" class="form-text text-muted">Check your Email address for default pin.</small>
          {{defaultPin}}

          <div *ngIf="defaultPin.invalid && (defaultPin.dirty || defaultPin.touched)"
              class="alert alert-danger">
    enter code here
            <div *ngIf="defaultPin.errors.required">
              Name is required.
            </div>
            <div *ngIf="defaultPin.errors.minlength">
              Name must be at least 4 characters long.
            </div>

          </div>
        </div>

但是当我运行时，我得到了这个错误

ERROR TypeError: Cannot read property 'invalid' of undefined
at Object.eval [as updateDirectives] (AddPinComponent.html:21)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
at checkAndUpdateView (core.js:10153)
at callViewAction (core.js:10394)
at execComponentViewsAction (core.js:10336)
at checkAndUpdateView (core.js:10159)
at callViewAction (core.js:10394)
at execEmbeddedViewsAction (core.js:10357)
at checkAndUpdateView (core.js:10154)
at callViewAction (core.js:10394)

请帮帮我

【问题讨论】：

您是否在OnInit() 中添加了this.pinform？

标签： javascript html angular

【解决方案1】：

您正在同时使用reactive form 和Template-driven。

仅使用Reactive form. 更改您的文件。（根据您的要求进行修改）。

Component.Html

<form [formGroup]="pinForm">
    <div class="form-group">
        <label for="defaultPin">Default Pin</label>
        <input type="text" name="defaultPin" class="form-control" id="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
         formControlName="defaultPin" />
        <span class="text-danger" *ngIf="pinForm.controls['defaultPin'].hasError('required') && (pinForm.controls['defaultPin'].dirty || pinForm.controls['defaultPin'].touched)">This field is required</span>
    </div>
</form>

Component.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

export class AppComponent {

pinForm: FormGroup;

constructor(fb: FormBuilder) {
    this.pinForm = fb.group({
      'defaultPin': [null, Validators.required],
    });
  }
}

module.ts

// Import ReactiveFormModule in your module.ts file

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [ FormsModule, ReactiveFormsModule ],

如果仍有问题，请联系Stackblitz

【讨论】：

嗨 Shashikant，我只使用响应式表单，你怎么知道我使用的是模板表单
因为您在表单选项卡中同时使用了[formGroup]="pinForm" #formDir="ngForm"。 #formDir 用于模板表单。请参阅上面共享的 Stackblitz url 以轻松理解

【解决方案2】：

当您编写 formControlName = "defaultPin" 时，您提供了 FormControl 的名称，但为了访问 invalid、errors 等属性，您必须使用来自 FormGroup 的 FormControl 实例，例如：

pinForm.get('defaultPin')

因此，只需将以下 getter 添加到您的组件中：

get defaultPin() {
  return this.pinForm.get('defaultPin')
}

【讨论】：

【解决方案3】：

你需要引用你的pinForm 来获取它的控制器：

*ngIf="!pinForm.controls.defaultPin.valid && (pinForm.controls.defaultPin.dirty || pinForm.controls.defaultPin.touched)"

所以，你的表单应该是这样的：

<form [formGroup]="pinForm" #formDir="ngForm">

    <div class="form-group">
      <label for="defaultPin">Default Pin</label>
      {{formDir.valid}}
      <input type="text" name="defaultPin" class="form-control" id ="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
      formControlName = "defaultPin" />
      <small id="defaultPin" class="form-text text-muted">Check your Email address for default pin.</small>
      {{defaultPin}}

      <div *ngIf="!pinForm.controls.defaultPin.valid && (pinForm.controls.defaultPin.dirty || pinForm.controls.defaultPin.touched)")"
          class="alert alert-danger">
enter code here
        <div *ngIf="pinForm.controls.defaultPin.errors.required">
          Name is required.
        </div>
        <div *ngIf="pinForm.controls.defaultPin.errors.minlength">
          Name must be at least 4 characters long.
        </div>

      </div>
    </div>

另外，您应该在您的组件ngOnInit() 中启动您的formGroup：

【讨论】：