Clever Geek Handbook

ViewChild inside a form doesn't launch it from untouched

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 the value of the input "title", the submit button is enabled, but when I change the value of "foo", nothing happens. How can I remove a form from a child component?

+3


source to share


2 answers


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



Here's an example: angular2 - checking FormControlName in child component of parent FormGroup

0


source


You can simply create an event that emits when the form in the child component has changed. Use EventEmitter component inside ur child component!



0


source






More articles:


All Articles