Добавить элемент управления в форму в соответствии с наблюдаемой отдачей - PullRequest
Новая
       27

Добавить элемент управления в форму в соответствии с наблюдаемой отдачей

0 голосов
/ 17 сентября 2018

Мне нужно добавить элемент управления для типа массива моей формы, но мне нужно получить возвращаемое значение Observable, прежде чем отобразить значения, а затем добавить его в форму.

В приведенном ниже коде вставляется элемент управления пустого массива, даже если наблюдаемое значение отсутствует.

Мне нужно убедиться, что перед добавлением элемента управления в рамках подписки были возвращены все наблюдаемые данные.

Для этого нужно вставить пустое значение, мне нужно получить последнее значение, возвращаемое внутри подписки, а затем вставить элемент управления с количеством возвращенных пользователей.

В моем HTML мне нужно отобразить флажок с именем пользователя и тем, отмечены ли они или нет в массиве, идентификатором пользователя и логическим значением для каждого.

component.ts 

    users$ = this._store.select(usersSelectors.getUsers);

    this.myForm = this._formBuilder.group({
        // .... controls
    });

    this.users$.pipe(
        filter((data) => !!data),
        map(users => this._formBuilder.array(users.map(() => new FormControl(false))))
    ).subscribe(usersArray => 
        this.myForm.addControl('users', usersArray)
    );

component.html 

<div class="col-md-3">
  <label for="users">Users</label>
  <div id="users" class="row">
    <div class="checkbox" class="col-sm-4"
      formArrayName="users"
      *ngFor="let item of myForm.get('users').controls; let i = index" >
      <label class="checkbox-inline">
        <input type="checkbox" [formControlName]="i"> {{ users$[i].name }}
      </label>
    </div>

возврат от пользователей $: 

0: {subscriber: false, avatar: "", name: "Paul", id: "eXrrdOfmUGYHFIOVCWjBnAO7PZ52" …}
1: {subscriber: true, avatar: "", name: "Will", id: "NoQMVGnCA6VPc42ksIa6AqZZNWL2" …}

При маркировке пользователя пользовательский контроль должен выглядеть следующим образом. 

users: [
{eXrrdOfmUGYHFIOVCWjBnAO7PZ52: false}
{NoQMVGnCA6VPc42ksIa6AqZZNWL2: true}
]

1 Ответ

0 голосов
/ 17 сентября 2018

Вы можете сначала создать форму, а затем push элементы управления для массива формы в зависимости от наблюдаемого значения. Что-то вроде этого: 

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  users;
  form: FormGroup;

  constructor(
    private http: HttpClient,
    private fb: FormBuilder
  ) {}

  get usersForm() {
    return (<FormArray>this.form.get('users')).controls;
  }

  ngOnInit() {

    this.form = this.fb.group({
      users: this.fb.array([])
    });

    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe(users => {
        this.users = users;
        this.users.forEach(user => {
          if(typeof(user) == typeof(true)) this.usersForm.push(this.fb.control([user.tagged]));
        });
        console.log('Users Form: ', this.usersForm);
      });
  }
}

Вот Образец StackBlitz для того же.

...