Это просто безумие, похоже, что нет способа иметь форму, которую один из входных элементов находится в дочернем компоненте.
Я прочитал все блоги и учебные пособия и все, нет способа решить это.
Проблема в том, что когда дочерний компонент будет иметь какие-либо директивы формы (ngModel, ngModelGroup или что-то еще..), он не будет работать.
Это только проблема в шаблонах управляемых форм
Это плункер:
import { Component } from '@angular/core';
@Component({
selector: 'child-form-component',
template: '
<fieldset ngModelGroup="address">
<div>
<label>Street:</label>
<input type="text" name="street" ngModel>
</div>
<div>
<label>Zip:</label>
<input type="text" name="zip" ngModel>
</div>
<div>
<label>City:</label>
<input type="text" name="city" ngModel>
</div>
</fieldset>'
})
export class childFormComponent{
}
@Component({
selector: 'form-component',
directives:[childFormComponent],
template: '
<form #form="ngForm" (ngSubmit)="submit(form.value)">
<fieldset ngModelGroup="name">
<div>
<label>Firstname:</label>
<input type="text" name="firstname" ngModel>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastname" ngModel>
</div>
</fieldset>
<child-form-component></child-form-component>
<button type="submit">Submit</button>
</form>
<pre>
{{form.value | json}}
</pre>
<h4>Submitted</h4>
<pre>
{{value | json }}
</pre>
'
})
export class FormComponent {
value: any;
submit(form) {
this.value = form;
}
}
