Мне известно о создании пользовательских элементов управления в качестве компонентов, но я не могу понять, как создавать пользовательские группы.
То же самое мы можем сделать это, реализовав ControlValueAccessor
и используя пользовательский компонент, такой как <my-cmp formControlName="foo"></my-cmp>
, как мы можем достичь этого эффекта для группы?
<my-cmp formGroupName="aGroup"></my-cmp>
Два очень распространенных варианта использования: (а) разделение длинной формы на этапы, каждый шаг в отдельном компоненте, и (б) инкапсуляция группы полей, которые появляются в нескольких формах, таких как адрес (группа страны, штат, город), адрес, номер здания) или дата рождения (год, месяц, дата).
Пример использования (не фактический рабочий код)
Родитель имеет следующую форму, FormBuilder
с помощью FormBuilder
:
// parent model
form = this.fb.group({
username: '',
fullName: '',
password: '',
address: this.fb.group({
country: '',
state: '',
city: '',
street: '',
building: '',
})
})
Родительский шаблон (недоступный и несемантический для краткости):
<!-- parent template -->
<form [groupName]="form">
<input formControlName="username">
<input formControlName="fullName">
<input formControlName="password">
<address-form-group formGroup="address"></address-form-group>
</form>
Теперь этот AddressFormGroupComponent
знает, как обрабатывать группу, в которой есть эти конкретные элементы управления.
<!-- child template -->
<input formControlName="country">
<input formControlName="state">
<input formControlName="city">
<input formControlName="street">
<input formControlName="building">