Почему не работает for в форме?

Не получается вывести список option в select. Ошибок в консоль не выводит.

Форма:
<form class="col-md-6" [formGroup]="complaintForm" (ngSubmit)="formSubmit(complaintForm.value)">
                  <div class="form-group" [ngClass]="{'has-error':!complaintForm.controls['lastName'].valid}">
                    <label for="lastName">Фамилия</label>
                    <input type="text" id="lastName" formControlName="lastName" class="form-control">
                  </div>
                  <div class="form-group" [ngClass]="{'has-error':!complaintForm.controls['firstName'].valid}">
                    <label for="firstName">Имя</label>
                    <input type="text" id="firstName" formControlName="firstName" class="form-control">
                  </div>
                  <div class="form-group" [ngClass]="{'has-error':!complaintForm.controls['middleName'].valid}">
                    <label for="middleName">Отчество</label>
                    <input type="text" id="middleName" formControlName="middleName" class="form-control">
                  </div>
                  <div formArrayName="classifications">
                    <label for="">Тема обращения</label>
                    <div class="form-group" *ngFor="let formSelect of classifications.controls; let i=index">
                      <div [formGroup]="formSelect">
                        <select formArrayName="options" formControlName="select" class="form-control">
                            <option *ngFor="let opt of options" formControlName="opt" value="">---</option>
                        </select>
                      </div>
                    </div>
                  </div>
                    <button type="button" class="btn btn-default" (click)="addUser()">Добавить поле</button>
                    <button type="submit" [disabled]="!complaintForm.valid" class="btn btn-default">Submit</button>
                </form>


Компонент:
export class NewComplaintComponent implements OnInit{
  complaintForm: FormGroup;
  tl = themesComplaint;

  constructor(private fb: FormBuilder,
              private elementRef: ElementRef,
              private renderer: Renderer2) {}

  ngOnInit() {
    this.complaintForm = new FormGroup({
      lastName: new FormControl('', [Validators.required]),
      firstName: new FormControl('', [Validators.required]),
      middleName: new FormControl('', [Validators.required]),
      classifications: new FormArray([])
    });
    this.addSelectField();
  }

  get classifications(): FormArray { return this.complaintForm.get('classifications') as FormArray; }
  get options(): FormArray { return this.complaintForm.get('options') as FormArray; }

  formSubmit(data) {
    console.log(data);
  }

  addSelectField() {
    const classArray = <FormArray>this.complaintForm.controls['classifications'];
    const addCtrl = this.initClassificationField();
    classArray.push(addCtrl);
  }

  initClassificationField() {
    return new FormGroup({
      select: new FormControl(''),
      options: new FormArray([
        new FormGroup({
          value: new FormControl(''),
          text: new FormControl('---')
        })
      ])
    });
  }
}
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
StivinKing
@StivinKing
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы