Add validation in the child component (Reactive Forms)

0
votes

In the above Demo , I have built a reactive form with the input field inside a child component.I am trying to add new form control inside the child component and validate it inside the component itself.I am getting the following error.

Error: Cannot read property 'errors' of undefined

I am not sure what is the error and very new to the Reactive Forms.In Brief what i am trying to do is,

  • Append new control to the parent form group from the child component
  • Validation of the newly added control should be done inside the child component itself
1
angularangular-reactive-formsreactive-forms

1 Answers

1
votes

I know it's hard to learn all Angular syntax.

There are several changes you should make:

1) FormControl constructor takes value as a first argument,

So instead of writing:

new FormControl(Validators.required)

you should be using something like:

new FormControl('', [Validators.required])

2) To access form group property you should use either:

formGroup.controls.controlName

or

formGroup.get('controlName')

Forked Stackblitz