Угловая реактивная форма, ControlValueAccessor против PropertyBinding

У меня есть некоторые компоненты формы, которые на самом деле просто оборачивают некоторые части большого формуляра на маленькие кусочки. Я могу представить себе два способа сделать это: ControlValueAccessor или простую привязку PropertyBinding для передачи FormControl в подкомпонент.

Супер-простой пример https://stackblitz.com/edit/angular-dt6pva

Основные идеи:

...
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => Input01Component)
    }
  ]
})
export class Input01Component implements ControlValueAccessor  {
...

vs.

...
  @Input()
  control = new FormControl();
...

ControlValueAccessor-way кажется немного более "правильным", но также и более "рабочим".

Вопрос: есть ли аспекты / преимущества / недостатки при использовании более простого FormControl-Input-Binding?

ИЗМЕНИТЬ

Подумайте об этой структуре json, которая должна быть оформлена как форма

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }

Я бы определил 3 компонента: PersonForm, AdressForm, CompanyForm.

преимущества / недостатки, которые приходят мне в голову, кто-то может добавить некоторые моменты, которых я не видел:

FormControl-ввод

  • ++ более простые подкомпоненты
  • - разные свойства для использования (я не могу повторно использовать formControl / formControlName)

ControlValueAccessor

  • ++ такое же использование, как и все другие входные компоненты (formControlName)
  • - «больше работы» для реализации
  • ?? разбить большую форму определений. С одной стороны, создание небольших компонентов - это вообще хороший момент, и я могу повторно использовать компоненты формы. С другой стороны, я "теряю" общий вид структуры данных, которая может быть отправлена ​​непосредственно в оставшийся сервер:
   peronForm = new FormGroup({
    id: new FormControl(),
    name: new FormControl(),
    username: new FormControl(),
    email: new FormControl(),
    address: new FormControl(), //>> handled by AdressComponent
    company: new FormControl() //>> handled by CompanyComponent
  });

До сих пор: не уверен, хорошо это или плохо :)

Спасибо за помощь


angular angular-reactive-forms controlvalueaccessor property-binding
person Christian Jansik    schedule 26.03.2020    source источник
comment
Не знаю о преимуществах / недостатках, но я знаю, что когда вы подключаете группы форм и элементы управления, Angular захватывает всю проверку формы (если вы этого хотите), а также методологию получения и установки значений. FormGroups и элементы управления работают лучше всего, когда вам нужна проверка, поскольку они сокращают все усилия по проверке, чтобы они были просто выражениями регулярных выражений.   -  person JWP    schedule 26.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

Сценарий представляет собой Angular Reactive Forms с довольно сложной формой, организованной в подразделах.

Эти два подхода не совпадают, и есть много различий.

Однако основной вопрос заключается в следующем: каждая подчиненная форма представляет собой неделимое значение или является надлежащей подчиненной формой? Или: как вы думаете, у вас может быть несколько проверок для отдельных частей каждой подчиненной формы?

То, что происходит внутри ControlValueAccessor, не касается _2 _ / _ 3_: это весь смысл абстракции. Таким образом, события проверки и изменения значения обрабатываются только на уровне ControlValueAccessor.

Другими словами, ControlValueAccessor следует использовать, когда вам нужно управлять одиночным значением, независимо от его структуры (например, пара код / ​​значение, выбор с записью в качестве выбранного значения).

Если у вас есть набор полей (например, данные пользователя: имя, фамилия и т. Д.), Вы просматриваете подчиненную форму. Тогда вам следует предпочесть вложенный FormGroup.

Надеюсь, это поможет.

person A. Chiesa    schedule 26.03.2020
comment
Возникает вопрос: что такое единичное значение :)? Является ли объект единственным значением? Добавлен конкретный пример в начальном посте - person Christian Jansik; 27.03.2020