在孩子中訪問父母的 ngForm

Question

我有這樣的結構：

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

和我的子組件：

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

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

並且，這可以完美地確保表單中的所有組件都被計算為有效性。 問題是，我認為我不需要直接將 ngForm 的引用作為輸入傳遞。 如何跳過該輸入並仍然使這項工作？

一個細節：恰好是一個 angular 5 項目。

Answer 1

此StackBlitz Link 中的完整工作示例。

首先，您根本不需要將ngForm傳遞給子組件。 因為您可以通過提供給子組件提供者數組來使用ControlContainer和NgForm告訴子組件是父表單組的一部分。

在這個例子中，一個父組件app.component正在使用*ngFor加載子組件，我們剛剛將ControlContainer添加到子組件的 providers 數組中。 在這里，我們只需要為每個子組件動態賦予不同的名稱，為此我們需要將 index 作為@Input()傳遞給子組件並將其分配給 inputField 的name屬性。

如果任何 inputControl 有錯誤，則父控件的submit按鈕被禁用。

app.component.html是...

<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>

我們通過依賴注入將ControlContainer直接綁定到按鈕的[disabled]狀態..見下面的constructor()類文件。

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) { }
}

子組件.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>

子組件.ts

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

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

在這里， ControlContainer將負責將父組件的NgForm綁定到子組件。