CODEWITHSUNDEEP
angularangular2-forms
mikey8989
mikey8989

Reputation: 504

Angular 2 Forms: Unable to Access FormControl Errors

I'm working with Form Controls, which I thought I had a good grasp on. Right now I have a function that creates the controls and assigns their respective Validators.

For this.password1:FormControl and this.password2:FormControl, there should be an errors object like errors:{required: true, pattern:true}. However, the pattern property does not appear in the errors object for either one. I even added in Validators.minLength(8)to the this.password2 FormControl to see if it worked and the minLength error property did not appear either. The flip side is 'this.email' has the right error with errors: {required: true, email: true}.

Note: When I test the validity of the form. It does do the pattern checks and min length checks. I just can't access the errors properties that are supposed to be created. When I console.log the errors property on the FormContril all I get is errors:{required: true}.

Any help would be appreciated as to why the error properties are not created. Happy Thanksgiving!

  ngOnInit() {
    this.title.setTitle(this.pageTitle);
    this.createFormControls();
    this.createForm();
  }

  createFormControls(): void {
    const mediumRegex = new RegExp('(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})');

    this.email = new FormControl('', Validators.compose([Validators.required, Validators.email]));
    this.firstName = new FormControl('', Validators.compose([Validators.required]));
    this.lastName = new FormControl('', Validators.compose([Validators.required]));
    this.password1 = new FormControl('', Validators.compose([Validators.required, Validators.pattern(mediumRegex)]));
    this.password2 = new FormControl('', Validators.compose([Validators.minLength(8), Validators.required, Validators.pattern(mediumRegex)]));

    console.log(this.email);
  }

  matchPassword(AC: AbstractControl): any {
    const password1 = AC.get('password1').value; // to get value in input tag
    const password2 = AC.get('password2').value; // to get value in input tag
    if (password1 !== password2) {
      // console.log('false');
      AC.get('password2').setErrors({'MatchPassword': true});
      // console.log(AC);
      // console.log(this.registrationForm);
    } else {
      // console.log('true');
      return null;
    }
  }

  createForm(): void {

    this.registrationForm = this.fb.group({
      email: this.email,
      firstName: this.firstName,
      lastName: this.lastName,
      password1: this.password1,
      password2: this.password2,
    }, {
      validator: this.matchPassword // your validation method
    });
  }

Upvotes: 1

Views: 1241

Answers (1)

elvin
elvin

Reputation: 981

Basically you're not seeing all the validation results because of this line 

AC.get('password2').setErrors({'MatchPassword': true});

since you're overriding the form validator, that line is getting rid of the previous validation results and just putting its results.

What i've done before on similar scenarios is to define a nested form group to wrap those passwords controls and assign my custom validator function only to it. So your form declaration will look like this: 

this.registrationForm = this.fb.group({
  email: this.email,
  firstName: this.firstName,
  lastName: this.lastName,
  passwords: this.fb.group({
    password1: this.password1,
    password2: this.password2
  }, {validator: this.matchPassword}) // your validation method})
});

I've prepared a plunker to illustrate better how you can reach the validation errors for each case (just hit submit to see the results) https://plnkr.co/edit/94VUlt8K5SvWXBGcW6Qx

Upvotes: 1

Related Questions