Если оставшийся код необходим для полной иллюстрации, я бы выделил дополнительное время, чтобы позже обновить свой ответ. Наслаждайтесь!
урсе создания кастомауправления в качестве компонентов, но я не могу понять, как создавать собственныегруппы.
То же самое мы можем сделать этореализацииControlValueAccessor
и используя пользовательский компонент, такой как<my-cmp formControlName="foo"></my-cmp>
Как мы можем достичь этого эффекта дляa группа?
<my-cmp formGroupName="aGroup"></my-cmp>
Два очень распространенных варианта использования: (а) разделение длинной формы на этапы, каждый шаг в отдельном компоненте, и (б) инкапсуляция группы полей, которые появляются в нескольких формах, таких как адрес (группа страны, штат, город) , адрес, номер здания) или дата рождения (год, месяц, дата).
Пример использования (не фактический рабочий код)Родитель имеет следующую форму, построенную с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">