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

如果您只想显示值，请使用“value”。你可以用

  <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 是一个数组

Answer 2

将此代码写入您的 .ts 文件。 getControls() {return (this.signupForm.get('爱好')).controls;}

这是针对 .html 文件的