Угловые формы - Как связать formControlName для выбора в formArrayName для использования объектов - PullRequest
Новая
       37

Угловые формы - Как связать formControlName для выбора в formArrayName для использования объектов

0 голосов
/ 09 февраля 2019

Я пытаюсь выяснить, как настроить сложную привязку объекта привязки для select внутри formArrayName.Я предполагаю, что formControlName должен иметь ссылку на текущий элемент в массиве, но я не знаю, как получить к нему доступ. 

<div formArrayName="users">
    <div *ngFor="let u of users.controls; let i=index" [formGroupName]='i'>
      user {{i}}: <select formControlName='id'[compareWith]="compareFn">
        <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
      </select>
    </div>
  </div>

Я создал демо с единственным выбором (который работает какЯ хочу) и массив, который толкает значение в "id".https://stackblitz.com/edit/angular-d2uaa1

Любая помощь очень ценится.

РЕДАКТИРОВАТЬ

Ключевые моменты:

  • Привязать все UsersGroup объекты со всеми свойствами (идентификатор и логин)
  • Минимальный дополнительный код (KISS)

Решение (на основе комментария @ JT_82) 

   <div *ngFor="let u of users.controls; let i=index">
      <select [formControlName]='i' [compareWith]="compareFn">
        <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
      </select>
    </div>

 ngOnInit(): void {
    this.owner.patchValue(this.group.owner);
    this.group.users.forEach(u => {
      this.users.push(this.fb.control(u))
    });
  }

 compareFn(a, b): boolean {
    return a.id === b.id;
  }

1 Ответ

0 голосов
/ 09 февраля 2019

РЕДАКТИРОВАТЬ: В соответствии с пожеланиями OP, мы хотели бы сохранить объект в качестве значения в select, для этого мы можем вместо того, чтобы использовать formgroup внутри formarray, просто нажать formcontrols, который затем содержит значения объекта: 

this.group.users.forEach(u => {
  this.users.push(this.fb.control(u)) // just push formcontrol!
});

, а затем отметьте в шаблоне: 

<select [formControlName]='i' [compareWith]="compareFn">
  <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
</select>

Поскольку мы теперь используем значение объекта в качестве formcontrol, при попытке сопоставления предустановленных значений нам нужна функция compareWith:

compareFn(a, b): boolean {
  return a.id === b.id;
}

StackBlitz

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Я бы, возможно, позвонилфункция, когда выбор изменяется, а затем найти пользователя из availableUsers и установить значение формы для login с найденным пользователем.Итак, шаблон: 

<select formControlName='id' (change)="findLogin(u)">
  <option *ngFor="let a of avaliableUsers" [ngValue]='a.id'>{{a.login}}</option>
</select>

Таким образом, вы можете удалить compareWith, так как теперь мы используем число для значения.Затем функция findLogin, где мы передаем текущую группу форм из итерации: 

findLogin(group: FormGroup) {
  const user = this.avaliableUsers.find(x => x.id === group.get('id').value)
  group.get('login').setValue(user.login);
}

Ваш разветвленный StackBlitz

...