[英]Passing value from Parent component to child component for ngForm in angular2?
[英]ngForm with validation and child component in angular 6
我有一張表格
<form #basic="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngModel required>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastName" ngModel>
</div>
<address ></address>
</form>
並且在那種形式中有一個子組件<address>
,我想要對父組件和子組件進行驗證。 我想用ngForm來做,我知道如何使用formgroups,通過將表單變量傳遞給子組件,但我也嘗試了但是它給我一個錯誤
子組件
import { Component, Input } from '@angular/core';
@Component({
selector: 'address',
template: `
<div>
<label>Zip:</label>
<input [ngClass]="{error: (basic.submitted)}" type="text" name="zip" ngModel>
</div>
<div>
<label>Street:</label>
<input type="text" name="street" ngModel required>
</div>
<div>
<label>City:</label>
<input type="text" name="city" ngModel>
</div>
`,
})
export class AddressComponent {
}
您需要將表單變量傳遞給子組件,如下所示
<form #basic="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngModel required>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastName" ngModel>
</div>
<address [basic]="basic"></address>
</form>
處理該變量並在子組件中導入ControlContainer和NgForm
import { Component, Input } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'address',
template: `
<div>
<label>Zip:</label>
<input [ngClass]="{error: (basic.submitted)}" type="text" name="zip" ngModel>
</div>
<div>
<label>Street:</label>
<input type="text" name="street" ngModel required>
</div>
<div>
<label>City:</label>
<input type="text" name="city" ngModel>
</div>
`,
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class AddressComponent {
@Input() basic;
}
現在它將處理組件父級和子級的驗證。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.