angular 6 :- Reactive form validation is not working propery

Question

need regarding angular 6 reactive form validation, I have studied from official angular website

I want to validate my form and display the different error message to different error

Component code

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

Html code

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

But when I run I'm getting this error

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)

Please help me

Answer 1

You are using reactive form and Template-driven together.

Use Only Reactive form. Do changes in your files. (modify as per your requirement).

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 ],

If you still have problem refer Stackblitz

Answer 2

You need to reference your pinForm to get its controller:

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

So, this is what your form is supposed to look like:

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

Also, you should initiate your formGroup in your components ngOnInit():

Answer 3

When you write formControlName = "defaultPin" you provides name for FormControl but in order to access such properties as invalid, errors etc you have to FormControl instance from FormGroup like:

pinForm.get('defaultPin')

So simply add the following getter to your component:

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