在没有formGroup的情况下控制formArray,可以通过以下步骤实现:
下面是一个示例代码,演示如何在没有formGroup的情况下控制formArray:
import { Component } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
<div>
<button (click)="addControl()">Add Control</button>
<button (click)="removeControl(i)" *ngFor="let control of formArray.controls; let i = index">Remove Control {{ i }}</button>
<div *ngFor="let control of formArray.controls; let i = index">
<input [formControl]="control" placeholder="Control {{ i }}">
</div>
</div>
`,
})
export class ExampleComponent {
formArray: FormArray = new FormArray([]);
addControl() {
const control = new FormControl('');
this.formArray.push(control);
}
removeControl(index: number) {
this.formArray.removeAt(index);
}
}
在上述示例中,我们创建了一个formArray,并通过addControl方法向其中添加新的FormControl对象。通过removeControl方法,我们可以移除指定索引位置的FormControl对象。在模板中,我们使用ngFor指令遍历formArray中的每个FormControl对象,并使用formControl指令将其绑定到相应的输入框上。
这样,我们就可以在没有formGroup的情况下控制formArray。请注意,这只是一个示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。腾讯云云服务器提供可扩展的计算能力,适用于各种应用场景。腾讯云云数据库MySQL提供高性能、可扩展的数据库服务,适用于存储和管理大量数据。
更多关于腾讯云云服务器的信息,请访问:腾讯云云服务器
更多关于腾讯云云数据库MySQL的信息,请访问:腾讯云云数据库MySQL
领取专属 10元无门槛券
手把手带您无忧上云