Как правильно использовать сгенерированную форму / динамику c в сочетании с реактивными формами в Angular 8 - PullRequest
Новая
       8

Как правильно использовать сгенерированную форму / динамику c в сочетании с реактивными формами в Angular 8

0 голосов
/ 28 января 2020

Я относительно новичок в Angular, и у меня возникла проблема с реактивной формой / построителем форм / массивом форм.

В настоящее время я получаю список компаний из нашего API. Мне нужно добавить поле ввода, чтобы добавить «специальный код» для каждой компании, прежде чем отправлять его обратно.

Проблема в том, что (и примеры, кажется, привели меня к этому), теперь я зацикливаюсь на al oop, чтобы получить содержимое моего массива управления формой. Без этого companyArray я получаю ошибки, поскольку Angular не может найти элемент управления формы. 'контроль формы не найден -> 0' и т. д. c

Я внес небольшой взлом в HTML, но меня это совсем не устраивает. Я предполагаю, что решение, вероятно, довольно простое, и я делаю что-то принципиально глупое. Я просто скучаю по необходимым знаниям, и все, что я пытаюсь, кажется, нарушает мой пример. Любая помощь будет наиболее ценной.

Я создал этот упрощенный пример StackBlitz ниже.

ПРИМЕР StackBlitz : https://stackblitz.com/edit/angular-267xnc

export class AppComponent {

  listOfPossibleCompaniesFromAPI: any[] = ['BBC', 'Apple', 'Amazon'];
  accountForm: FormGroup;

  ngOnInit() {
    this.accountForm = this.fb.group({
      'CompanyArray': this.fb.array([])
    });
    this.listOfPossibleCompaniesFromAPI.forEach(() => {
      this.CompanyArray.push(this.fb.group(new Group(false, '')));
    });
  }

  constructor(private fb: FormBuilder) {}

  get CompanyArray(): FormArray {
    return this.accountForm.get('CompanyArray') as FormArray;
  }
}

<form [formGroup]="accountForm">
  <div *ngFor="let companyName of listOfPossibleCompaniesFromAPI; let z=index">
    <div formArrayName="CompanyArray">
      <div *ngFor="let student of CompanyArray.controls; let i=index" [formGroupName]="z">
        <div *ngIf="z === i">
          <input type="checkbox" formControlName="selected"> {{ companyName }}
          <input formControlName="specialCode" placeholder="Enter special code">
        </div>
      </div>
    </div>
  </div </form>

  {{accountForm.value | json}}

1 Ответ

0 голосов
/ 28 января 2020

Да - это отвратительный, безобразный хак

без шуток, поскольку в вашем массиве форм имеется такое же количество групп, что и в вашем массиве "listOfPossibleCompaniesFromAPI" (*), просто используйте listOfPossibleCompaniesFromAPI [i] 

<form [formGroup]="accountForm">
        <div formArrayName="CompanyArray">
      <div *ngFor="let student of CompanyArray.controls; let i=index" [formGroupName]="i">
          <input type="checkbox" formControlName="selected">
          {{ listOfPossibleCompaniesFromAPI[i] }}
          <input formControlName="specialCode" placeholder="Enter special code">
        </div>
    </div>
</form>

(*) Логически у вас есть forEach этого массива для pu sh formGroup в массиве

...