Angular 2 Reactive Forms - Как показать элементы управления FormArray, отличные от элемента ввода

Question

Я пытаюсь использовать FormArray с элементами, отличными от input.В большинстве примеров, которые я видел, в качестве динамически представленных объектов используется элемент input.

В компоненте я добавил FormArray.

newHobby: string = null;
employmentForm: FormGroup;

ngOnInit() {
    this.userForm = new FormGroup({
      'hobbies': new FormArray([])
    });
}

onAddHobby() {
    const control = new FormControl(this.newHobby, Validators.required);
    (<FormArray>this.employmentForm.get('hobbies')).push(control);
}

И в HTML,

<form [formGroup]="userForm">
    <div class="form-group" formArrayName="hobbies">
        <input type="text" id="new-hobby" class="form-control" [(ngModel)]="newHobby" [ngModelOptions]="{standalone: true}">
        <button class="btn btn-outline-secondary btn-sm mt-3" type="button" (click)="onAddHobby()">Add Hobby</button>
        <ul class="list-group">
          <li class="list-group-item"
            *ngFor="let hobbyControl of userForm.get('hobbies').controls; let i = index"
            [formControlName]="i" [innerHtml]="hobbyControl[i]"></li>
        </ul>
    </div>
</form>

Но всякий раз, когда я пытаюсь добавить хобби, при нажатии кнопки Add Hobby я вижу следующую ошибку.

Подскажите, пожалуйста, где я не так делаю.Или FormArray не поддерживает элементы управления, кроме input.

Answer 1

Если вы хотите показать только значение, используйте «значение». Вы можете использовать

  <li class="list-group-item"
    *ngFor="let hobbyControl of userForm.get('hobbies').controls; let i = index"
    [formControlName]="i" [innerHtml]="hobbyControl[i].value"></li>

Но вы также можете использовать

  <li class="list-group-item"
    *ngFor="let hobbyValue of userForm.get('hobbies').value; let i = index"
    [innerHtml]="hobbyValue"></li>

Смотрите, что userForm.get ('hobbies'). Value это массив