在孩子中访问父母的 ngForm

Question

I have a structure like this:

<form #myForm="ngForm">
  <div class=row>
    <app-section-a [myForm]="myForm"></app-section-a>

and my child component:

@Component({
...
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
// ...
@Input() myForm: ElementRef;

<input ...>
<button type=submit [disabled]="!myForm.valid">

and, this works perfectly to ensure that all the components in the form are counted for validity. The thing is, I don't think I should need to pass the reference to ngForm directly as an input. How do I skip that input and still make this work?

a detail: happens to be an angular 5 project.

Answer 1

Complete working example in this StackBlitz Link .

First of all you do not need to pass ngForm to child component at all. Because you can tell child component is part of parent form group using ControlContainer and NgForm by providing to child-component providers array.

In this example one parent component app.component is loading child component with *ngFor and we just added ControlContainer to providers array of child component. Here, we just need to give different name for each child-component dynamically, for this purpose we need to pass index as @Input() to child component and assign it to name property of inputField.

If any of inputControl has error then, submit button of parent control is disabled.

app.component.html is...

<form #heroForm="ngForm" class="container">
   <div id="parent" *ngFor="let i of [0,1,2]"  >
      <app-child [id]="i+1" [name]="i+1" ></app-child>
   </div>
  <hr>
    {{heroForm.value | json}}
  <hr>
  <div>
     <app-button-submit></app-button-submit>
  </div>
</form>

app-button-submit.html

<button type="submit" class="btn btn-success"
  [disabled]="!control.form.valid">Submit</button>

We are binding , ControlContainer directly to [disabled] state of button with dependency injection.. see below constructor() class file.

app-button-submit.ts

import {ControlContainer, NgForm} from '@angular/forms';

@Component({
   selector: 'app-button-submit',
   templateUrl: './button-submit.component.html',
   styleUrls: ['./button-submit.component.css'],
   providers : [{provide : ControlContainer, useExisting : NgForm}]
})
export class ButtonSubmitComponent  {
   constructor(private control : NgForm) { }
}

child-component.html

<div class="form-group" >
   <label [for]="Name">Name</label>    
      <input type="text"  class="form-control"  [id]="id" required [(ngModel)]="vname" [name]="Name"  #names="ngModel">
        {{vname}}
   <div [hidden]="names.valid || names.pristine" class="alert alert-danger"> 
      Name is required  
   </div>
</div>

child.component.ts

import {ControlContainer, NgForm} from '@angular/forms';

@Component({
   ---,
   viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
 export class ChildComponent implements OnInit {
   @Input('id') id;
   @Input ('name') Name;
 }

here, ControlContainer will take care of binding of NgForm of Parent-Component to Child-Component.