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

Question

需要关于角度6反应形式验证，我从官方角度网站研究

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

组件代码

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

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

pinForm.get('defaultPin')

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

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

Answer 2

你正在使用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

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>

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