要将FormArray控件显示为不同于输入元素的形式,可以使用Angular的Reactive Forms模块。下面是一个示例解决方法:
首先,在组件的HTML模板中,使用ngFor指令循环遍历FormArray控件的每个元素,并将其显示为不同于输入元素的形式。例如,你可以使用自定义的组件来显示每个元素,而不是使用常规的输入元素。在这个示例中,我们将使用一个简单的标签来显示每个元素的值。
接下来,在组件的Typescript文件中,创建一个FormArray,并将其添加到FormGroup中。然后,你可以使用push方法向FormArray中添加元素,并设置每个元素的初始值。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([])
});
// 添加初始元素到FormArray中
this.addItem('Initial Value 1');
this.addItem('Initial Value 2');
}
// 添加新元素到FormArray中
addItem(value: string) {
const items = this.myForm.get('items') as FormArray;
items.push(this.fb.control(value));
}
// 获取FormArray控件的引用
get items() {
return this.myForm.get('items') as FormArray;
}
}
最后,在自定义组件的代码中,你可以定义一个@Input属性来接收每个元素的值,并在模板中显示它。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-custom-component',
templateUrl: './custom-component.component.html',
styleUrls: ['./custom-component.component.css']
})
export class CustomComponentComponent {
@Input() value: string;
}
{{ value }}
现在,当你运行应用程序时,FormArray控件将以自定义组件的形式显示,而不是默认的输入元素形式。每个元素的值将显示在自定义组件中。
希望这个示例能够帮助到你!