Angular Реактивная форма, ControlValueAccessor и PropertyBinding - PullRequest
Новая
       38

Angular Реактивная форма, ControlValueAccessor и PropertyBinding

2 голосов
/ 26 марта 2020

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

Super-Simple-Example https://stackblitz.com/edit/angular-dt6pva

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

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

против 

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

Способ ControlValueAccessor выглядит немного более «правильным», но также более «работающим».

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

EDIT

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

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "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-Input

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

ControlValueAccessor

  • ++ такое же использование, как и все другие компоненты ввода (formControlName)
  • - «дополнительная работа» для реализации
  • ?? Разделить определения больших форм. С одной стороны, создание небольших компонентов является хорошим моментом в целом, и я могу использовать элементы form-component-parts. С другой стороны, я «теряю» общее представление о структуре данных, которая может быть отправлена ​​непосредственно бэкэнду отдыха: 
   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
  });

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

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

1 Ответ

0 голосов
/ 26 марта 2020

Сценарий: Angular Реактивные формы, с довольно сложной формой, организованные в подразделы.

Два подхода не одинаковы, и есть много отличий.

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

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

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

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

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

...