Reactive Forms in angular

Template driven forms look easier to implement if some one comes form angular js background at first sight and when we say reactive forms are created at code level, usually people think these must be the complex one.

But in actual it is not true, reactive forms just decouple error handling, validation and most importantly business logic is driven from component/typescript file to template file. While in template driven form it happens just opposite.

So there are many benefit of using reactive form, we will see how to implement reactive form in this video.

If you would like to watch a video on template driven form you can watch my previous video. from below link

Next we will understand few more concepts about forms and then we will understand the various benefits of using reactive forms over the template driven forms

Registration Form Code

Download complete code

Wikipedia link for valid email id

You can support me by donating on

Thanks
Studymash

[StudyMash]

if you are using angular 12 or above, you need to change passwordMatchingValidation function as below

passwordMatchingValidator(fc: AbstractControl): ValidationErrors | null {
return fc.get('password')?.value === ? null :
{ notmatched: true }
};

[yosephkefale]

this series of tutorial is
the best tutorial i have seen in 2021, simple and easy to understand, thanks bro, u make ma life easy

[muhammadadil]

even after 3 your tutorial are best among all please make again some new project like this. thanks

[TaniaAkter-qlow]

As always ....great!!!....I learned many thing from u..Thanks ..:)

[ajay.chawla]

I am facing an issue whenever I go to the form and fill in details, suddenly all the inputs go blank and the console says WDS Disconnected. I tried clearing the cache and restarting the app but nothing works

[knightrider]

Custom Validator is not working, getting error in the return statement of the validator method :(

[chuchotech]

just a comment, looks like for the new version of angular this is the right format for this validation <span

[noorulaarefinsyed]

hey sir , the password matching function is not working in my project . i am on angular 12 & i did copied the code from your pinned comment. help me l

[balajeek]

Thank you very much for quick response on my earlier note. If you can advice me on something off topic, I bought Kendo UI sometime back and I am wondering if that tool would help me get better form controls and UI. OR should i just use free tool like angular material or similar. I am in the early stage of my development with this angular 9 application and i would appreciate your thought on that. thanks.

[ZenOfTube]

Is anyone else not getting the notmatched error when adding the confirm password? I even copied the html from github (and changed the registerationForm typo to match my registrationForm text) but the error never shows up. I tried Chrome and FireFox. All other invalid errors show up.

[qipeng]

the Validators of confirmpassword has some error in angualr 11, Error: - error TS2531: Object is possibly 'null'. - error TS2322: Type '{ notmatched: boolean; } | null' is not assignable to type 'Validators'.
Type 'null' is not assignable to type 'Validators'.

[thunderhawknikhil]

tried implementing cross field validation with your approach, It is not working for me... the error message does not show when {notMatched: true}.
<mat-form-field>
<mat-label>confirm password</mat-label>
<input type="password" matInput id="confirmPassword"
<mat-error confirm password</mat-error>
<mat-error && not matching</mat-error>
</mat-form-field>

[nawalfatima]

Argument of type '(fg: FormGroup) => { mismatch: boolean; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.
Type '(fg: FormGroup) => { mismatch: boolean; }' is not assignable to type 'ValidatorFn'.
Types of parameters 'fg' and 'control' are incompatible.
Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.ts(2345) im getting this error. i have tried everything. please help

[devenshah]

No need to say, learning a lot. Your idea of not explaining things make faster, on the contrary, repetitions makes reinforcement. I understand you get tired after saying same things over and over. I do appreciate for imparting valuable, state of the art knowledge.

[Ramadevi-kzmo]

<span && confirmPassword.valid">
Password not matched
</span>
I used this code for checking password and confirmpassword. But it does not show error message.

[ZenOfTube]

How can we keep the Confirm Password field border red until a match is confirmed? The red boarder goes away while the "Please confirm password" message remains. Like the video, when we type a letter (which triggers the notmatched error), the boarder is no longer red (I think because the only validator to trigger from ng-invalid to ng-valid is Validators.required, which I found by debugging and finding a change to ng-valid if anything is typed, so it looses the error-block class.) I think we need to put something in the component class confirmPassword configuration, so is it possible to add our passwordMatchingValidator function to the validator array? Perhaps this is a more complicated issue and needs asynchronous function call which may be beyond the scope of this tutorial. What do you think?

[eswar]

I am not getting intelligence of method names like hasError .. what should i do?

[eswar]

and password matching validator not working. and when click on the submit button I am not getting ng formgroup options in the console

[sangmeshwartugaonkar]

Hi sir mr-2 ml-2 this kind of bootstrap code not working in html

[mohdafzaal]

FormGroup): Validators {
return fg.get('password').value === ? null :
{notmatched: true};
}

I am getting this error
Type '{ notmatched: boolean; } | null' is not assignable to type 'Validators'.
Type 'null' is not assignable to type 'Validators'.