angular 6 :- 反应式表单验证不起作用

Question

需要关于 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)

请帮我

Answer 1

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

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

组件.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>

组件.ts

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

export class AppComponent {

pinForm: FormGroup;

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

模块.ts

// Import ReactiveFormModule in your module.ts file

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

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

如果您仍然有问题，请参阅Stackblitz

Answer 2

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

pinForm.get('defaultPin')

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

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

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