viewChild inside a form does not trigger it from pristine

Question

Here's the situation:

parent.component.html

<form #someForm >
  <input type="text" name="title" [(ngModel)]="parentVar" />
  <child-component />
  <input type="submit" [disabled]="someForm.form.pristine" />
</form>

child.component.html

  <div>
    <input type="number" name="foo" [(ngModel)]="childVar" />
  </div>

When I change value of 'title' input the submit button gets enabled, but when change the value of 'foo' input nothing happens. How can I render the form dirty from the child component?

try this: https://stackoverflow.com/a/43411549/7741865 – AT82 Jun 23 '17 at 16:18 — AT82, Jun 23 '17 at 16:18

score 1 · Answer 1 · answered Jun 19 '17 at 23:51

By default, any nested component is not part of the ngForm data structure that Angular creates to track for state. You need to pass the form (via #someForm) into each of the child components.

There is an example here: angular2 - validating FormControlName in child component of parent FormGroup

score 1 · Answer 2 · answered Feb 14 '18 at 10:51

1

You can simply create an Event that Emits when the form in the child component got changed. Use the EventEmitter inside ur child component!

answered Feb 14 '18 at 10:51

Michel Ferreira Ribeiro

413
2
9

viewChild inside a form does not trigger it from pristine

2 Answers2