# Validation isn't working & Input Field is filled with my Own code

**URL:** <https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571>\
**Category:** Angular\
**Created:** [May 22, 2022, 4:02am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571 "2022-05-22T04:02:33Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![amgo85](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@amgo85](https://forum.codewithmosh.com/u/amgo85)\
**Post date:** [May 22, 2022, 4:02am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/1 "2022-05-22T04:02:33Z")

</div>

I have been following angular classes literally, but I am stuck with reactive forms  
Validation isn’t working & input field is filled with some portions of my own code, I don’t know why

Appreciate any help

![error1](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/d/dfc76a25a76ad209f7a85771303813a2963ab061.png)

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [May 22, 2022, 5:10am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/2 "2022-05-22T05:10:21Z")

</div>

Could you paste a code snippet showing the HTML and Typescript? Use the code format around you code snippets to make them legible:

```nohighlight
let someVariable: string = "";

```

---

<div class="post-metadata">

**Author:** ![amgo85](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@amgo85](https://forum.codewithmosh.com/u/amgo85)\
**Post date:** [May 22, 2022, 6:59am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/3 "2022-05-22T06:59:17Z")

</div>

I appreciate your quick response dear

**Here is the change-password.component.ts**

```auto
import { Component} from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
import { PasswordValidators } from './password.validators';

@Component({
  selector: 'change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.css']
})
export class ChangePasswordComponent {
  form: FormGroup;
  constructor(fb: FormBuilder){
    this.form = fb.group({
      oldPassword: new FormControl(['', Validators.required], PasswordValidators.validOldPassword),
      newPassword: new FormControl(['', Validators.required]),
      confirmPassword: new FormControl(['', Validators.required])
    }, {
        validator: PasswordValidators.passwordsShouldMatch
    } );
  }

  get oldPassword(){ return this.form.get('oldPassword'); }
  get newPassword(){ return this.form.get('newPassword'); }
  get confirmPassword(){ return this.form.get('confirmPassword'); }

}

```

**& here is password.validators.ts**

```auto
import { AbstractControl, ValidationErrors } from '@angular/forms';

export class PasswordValidators {
  static validOldPassword(control: AbstractControl){
    return new Promise((resolve) => {
      if(control.value !== '1234' ) resolve ({ invalidOldPassword: true });
      else resolve(null);
    });
  }

  static passwordsShouldMatch(control: AbstractControl) {
    let newPassword = control.get('newPassword');
    let confirmPassword = control.get('confirmPassword');

    if (newPassword.value !== confirmPassword.value)
      return { passwordsShouldMatch: true };
        
    return null;
  }
}

```

 ![change-password.component-html](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/2/235e3c22be29c05a326e18ae3dc44960992ff37a.png)

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [May 23, 2022, 2:39am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/4 "2022-05-23T02:39:41Z")

</div>

Still trying to verify the state of that screenshot you showed - is that the state of the page when you load it? Or is it only after you have entered some data into the fields? If you have an exact sequence of steps that you took to get into that state it would be nice to have those written out. For example:

1. Refresh the page (or start with a fresh page)
2. Type “blah” into some field
3. … more steps…

And finally write down the expected result (eg. “get an error message saying …”) and what you are actually seeing (which could be multiple things that are unexpected).

---

<div class="post-metadata">

**Author:** ![amgo85](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@amgo85](https://forum.codewithmosh.com/u/amgo85)\
**Post date:** [May 23, 2022, 5:36am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/5 "2022-05-23T05:36:03Z")

</div>

1. As I refresh the page the code gets filled automatically
2. here is the text gets filled in the input field, I made the type of the first input field as text to make text visible…

```auto
,function (control) { return isEmptyInputValue(control.value) ? { 'required': true } : null; }

```

There is no error message whatsoever

![output](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/4/402b76284ff9a8abf336d01345ccd9a368a3ce0f.jpeg)

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [May 23, 2022, 5:49am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/6 "2022-05-23T05:49:14Z")

</div>

So for starters, this syntax here is actually deprecated:

```auto
  form: FormGroup;
  constructor(fb: FormBuilder){
    this.form = fb.group({
      ...
    }, /* This bit here (start) ==> */ {
        validator: PasswordValidators.passwordsShouldMatch
    } /* <=== This bit here (end) */);
  }

```

Adding a second parameter to the `FormBuilder.group` method was certainly not discussed in Mosh’s videos (only in his solution). In [the Angular docs](https://angular.io/api/forms/FormBuilder#group), that second parameter should contain an `AbstractControlOptions` unless you are invoking the deprecated API. According to the API of the `AbstractControlOptions` interface, you just need to rename that from `validator` to `validators` to be a valid `AbstractControlOptions` interface.

It is also unclear to me if you can safely combine `FormBuilder` with trying to manually construct the `FormControl` objects (which also look a bit wonky and might simply be improperly constructed):

```auto
  constructor(fb: FormBuilder){ /* <=== Using FormBuilder */
    this.form = fb.group({
      /* Then attempting to manually construct the FormControl: */
      oldPassword: new FormControl(['', Validators.required], PasswordValidators.validOldPassword),

```

A standard FormControl constructor should look more like this (according to [its definition](https://angular.io/api/forms/FormControl)):

```auto
new FormControl('', Validators.required, PasswordValidators.validOldPassword)

```

You should be able to fix that by just leveraging `FormBuilder`:

```auto
  constructor(fb: FormBuilder){
    this.form = fb.group({
      oldPassword: ['', Validators.required, PasswordValidators.validOldPassword],
      newPassword: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }

```

Aside: I noticed a small bug at line 14 in your HTML (perhaps you can spot it now):

```auto
<div *ngIf="oldPassword.errors.invalidOldPassword">Old Password is required.</div>

```

Interestingly, password match validator is [the example Angular has in their docs](https://angular.io/api/forms/FormGroup#create-a-form-group-with-a-group-level-validator) for creating a “group-level validator” so it should be relatively easy to replicate.

* * *

Personally, I just put the validator on the `confirmPassword` and used the `parent` property on the `AbstractControl` to get access to the `newPassword` value (since it meant I had the `confirmPassword` directly available) which means my method to check if they match looks like this:

```auto
        if (control.parent?.get('newPassword')?.value === control.value) {
            return null;
        }
        return { confirmPasswordMismatch: true }

```

NOTE: that leverages a bunch of type-safety mumbo-jumbo since the version of TS / Angular I am working with obliges strict null safety.

---

<div class="post-metadata">

**Author:** ![amgo85](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@amgo85](https://forum.codewithmosh.com/u/amgo85)\
**Post date:** [May 23, 2022, 5:55am UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/7 "2022-05-23T05:55:31Z")

</div>

Thanks a lot dear  
some I am able to clear the input field.

```auto
this.form = fb.group({
      oldPassword: ['', // I removed this two single quotes & the field is now clear & added again
        Validators.required, 
        PasswordValidators.validOldPassword
      ],
      newPassword: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, {
      validator: PasswordValidators.passwordsShouldMatch
    });

```

Only thing now bootstrap is not active

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [May 23, 2022, 1:51pm UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/8 "2022-05-23T13:51:20Z")

</div>

I believe you need the two single quotes since it is the first parameter for constructing a FormConcept.

> Only thing now bootstrap is not active

Not sure what you mean “bootstrap is not active” - could you clarify?

Did you remember to add this to the top of styles.css?

```auto
@import "~bootstrap/dist/css/bootstrap.css";
/*
 * And possibly this if you want icons, though it seems
 * you would not need it for this particular exercise.
*/
@import "~bootstrap-icons/font/bootstrap-icons.css";

```

---

<div class="post-metadata">

**Author:** ![amgo85](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@amgo85](https://forum.codewithmosh.com/u/amgo85)\
**Post date:** [May 23, 2022, 4:38pm UTC](https://forum.codewithmosh.com/t/validation-isnt-working-input-field-is-filled-with-my-own-code/12571/9 "2022-05-23T16:38:17Z")

</div>

Just now I added these two lines

```auto
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap/dist/css/bootstrap.min.css"

```

I would like to add that since the course is designed in Angular 4 & I was using Angular 12, I was often getting many errors, so I had to uninstall Angular 12, then I installed Angular 4, now everything is fine. maybe later after finishing the course I have a lot to do to migrate to the latest version of Angular…

**thanks so much Mr. Jason Runkle for your help**