Я хочу создать одну большую форму с Angular 2. Но я хочу создать эту форму с несколькими компонентами, как показано в следующем примере.<БР><БР> Приложение компонент
<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
<address></address>
</div>
<div>
<input type="text" ngModel required/>
</div>
<input type="submit" [disabled]="!form1.form.valid" > </form>
Адрес составляющая
<div>
<input type="text" ngModel required/> </div>
Когда я использовать код выше, он был виден в браузере, как мне нужно, но кнопка "Отправить" не был отключен, когда я удалить текст в адресной составляющей. <БР> Но кнопка была отключена корректно, когда я удалить текст в поле ввода в приложение компонент.
Я хотел бы использовать реактивную форму, которая работает достаточно хорошо, и как на ваш комментарий:
есть ли другой простой пример для этого? Может быть, тот же пример без петли
Я могу дать вам пример. Все, что вам нужно сделать, это вложить `FormGroup и научить этому ребенка.
Позвольте'ы сказать, ваша форма выглядит так, и вы захотите пройти "адрес" formgroup для ребенка:
ngOnInit() {
this.myForm = this.fb.group({
name: [''],
address: this.fb.group({ // create nested formgroup to pass to child
street: [''],
zip: ['']
})
})
}
Затем в ваших родителей, просто передать вложенные formgroup:
<address [address]="myForm.get('address')"></address>
В вашего ребенка, используйте `@вход для вложенной formgroup:
@Input() address: FormGroup;
И В использовать шаблон [formGroup]
:
в
<div [formGroup]="address">
<input formControlName="street">
<input formControlName="zip">
</div>
Если вы не хотите, чтобы создать реальную вложенные formgroup, вы Дон'т должны сделать это, вы можете просто затем передать родительской форме, чтобы ребенок, поэтому если ваша форма выглядит так:
в
this.myForm = this.fb.group({
name: [''],
street: [''],
zip: ['']
})
вы можете пройти любой контроль, который вы хотите. Используя тот же пример, что и выше, мы хотели бы показать улица
и ZIP
, дочерний компонент остается неизменным, но бирку ребенок в шаблоне, то будет выглядеть так:
в
<address [address]="myForm"></address>
Здесь'ы
Демо от первого варианта, здесь's второй демо
Подробнее здесь О вложенной модели управляемых форм.
Из моего опыта, такая форма состав полевых трудно сделать на основе шаблонов форм. Поля, встроенные в ваш адрес компонентом Дон'т получить регистрацию в форме (NgForm.объект контроля), поэтому они не учитываются при проверке форме.
Есть способ сделать это в тоже на основе шаблонов форм. ngModel автоматически создает отдельную форму на каждый компонент, но вы можете придать форму родительского компонента путем добавления этого компонента:
@Component({
viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
}) export class ChildComponent
Вы должны удостовериться, что каждый вход имеет уникальное имя. Так что если вы используете *ngFor вызвать ваш дочерний компонент, вы должны положить указательный (или любой другой уникальный идентификатор) в название , например:
[name]="'address_' + i"
Если вы хотите структурировать ваши формы в FormGroups, вы используете ngModelGroup и
viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]
вместо ngForm и добавить
[ngModelGroup]="и yourNameHere"
в
некоторые из ваших дочерних компонентов HTML, содержащий теги.
Я'd хотелось поделиться подхода, которые работали в моем случае. Я'вэ, созданных следующую директиву:
import { Directive } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Directive({
selector: '[appUseParentForm]',
providers: [
{
provide: ControlContainer,
useFactory: function (form: NgForm) {
return form;
},
deps: [NgForm]
}
]
})
export class UseParentFormDirective {
}
Теперь, если вы используете эту директиву на дочерний компонент, например:
<address app-use-parent-form></address>
управления от AddressComponent будут добавлены в форму form1. В результате действия форма также будет зависеть от состояния контроля внутри дочернего компонента.
Проверено только с угловых 6