要实现Angular加载JSON到FormArray,并且不允许用户进行灵活的输入,可以通过以下步骤进行解决:
下面是一个示例代码:
在组件类中:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder, private http: HttpClient) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
items: this.formBuilder.array([])
});
this.http.get('assets/data.json').subscribe((data: any[]) => {
const itemsArray = this.myForm.get('items') as FormArray;
data.forEach(item => {
itemsArray.push(this.formBuilder.group({
name: [{ value: item.name, disabled: true }],
value: [{ value: item.value, disabled: true }]
}));
});
});
}
}
在模板中:
在上面的示例中,我们通过HttpClient来加载JSON数据,并将其填充到表单数组中。然后,我们在模板中使用ngFor指令来迭代表单数组,以显示每个表单控件的值。最后,我们使用disabled属性来禁用表单控件,以防止用户进行灵活的输入。