Используя Angular 2, у меня есть длинная сложная форма, которую я разделил на один родительский и два дочерних компонента для упрощения управления. Процесс отлично работает, пока мне не нужно отслеживать статус формы для проверки. Хотя данные о связанной модели можно легко передать через @Input, я не могу понять, как передать данные о самой форме.
Вот пример использования псевдокода:
@Component({
template: `
<form #f="ngForm">
<basic-details [exampleModel]="exampleModel"></basic-details>
<advanced-details [exampleModel]="exampleModel"></advanced-details>
<p>Form data: {{f.value | json}}</p>
</form>
`
})
export class ParentFormComponent {
public exampleModel: ExampleModel = new ExampleModel();
}
@Component({
selector: 'basic-details',
template: `
<input type="text" name="details" [(ngModel)]="exampleModel.details">
`
})
export class BasicDetailsComponent {
@Input() exampleModel: ExampleModel;
}
@Component({
selector: 'advanced-details',
template: `
<input type="text" name="advanced" [(ngModel)]="exampleModel.advanced">
`
})
export class AdvancedDetailsComponent {
@Input() exampleModel: ExampleModel;
}
В нижней части формы я показываю значения формы, используя канал JSON. f.value должен отображать данные о «подробных» и «расширенных» входных данных. Как передать информацию между родительским и дочерним компонентами, чтобы родительский компонент мог отслеживать статус формы? В идеале это будет работать как с управляемыми шаблонами, так и с реактивными формами.
