无法在 Angular 7 中的 FormControl 中追加值
Cannot append value in FormControl in Angular 7
数据 1
[]
0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
length: 2
__proto__: Array(0)
数据 2
(2) [{…}, {…}]
0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
length: 2
__proto__: Array(0)
API Json
FIELDS_FILTERS: [
{
type: "text",
name: "first_name",
label: "First Name",
value: "",
required: true,
},
{
type: "text",
name: "last_name",
label: "Last Name",
value: "",
required: true,
},
],
Angular代码
export class DynamicFormsTestComponent implements OnInit {
publicDeals: Person[] = [];
public form: FormGroup;
public fields1: any[] = [
{
type: 'text',
name: 'first_name',
label: 'First Name',
value: '',
required: true,
},
{
type: 'text',
name: 'last_name',
label: 'Last Name',
value: '',
required: true,
},
];
p_col: any;
constructor(private httpClient: HttpClient, private http: Http, private formBuilder: FormBuilder,
private personservice: PersonService) {}
ngOnInit() {
this.getOtherDetails();
this.p_col = this.publicDeals;
this.form = new FormGroup({
fields: new FormControl(this.publicDeals)
});
}
getFields() {
return this.p_col; ----this don't works
-- return this.fields1; --this works
}
getOtherDetails() {
return this.personservice.getDatatableDetails()
.subscribe(persons => {
persons.FIELDS_FILTERS.forEach(element => {
this.publicDeals.push(element);
});
});
}
this.p_col
输出数据2,没问题
组件html
{{publicDeals|json}}
<app-dynamic-form-builder [fields]="getFields()"></app-dynamic-form-builder>
当我转储 json.
输出
[{
"type": "text",
"name": "first_name",
"label": "First Name",
"value": "",
"required": false
}, {
"type": "text",
"name": "last_name",
"label": "Last Name",
"value": "",
"required": false
}]
现在我已经在动态组件中将正确格式的数据发送为 data2,但是当尝试打印时 this.fields 数据格式变为数据 1。
如果我在动态组件中输出的是数据 2,那么我的代码就可以工作。
动态组件 ts
export class DynamicFormBuilderComponent implements OnInit {
// @Output() onSubmit = new EventEmitter();
@Input() fields: any[] = [];
form: FormGroup;
persons: Person[];
submitted = false;
constructor(private router: Router, private personservice: PersonService) { }
ngOnInit() {
console.log(this.fields);
console.log(typeof(this.fields)); --always return object
console.log(this.fields.length);
--length 0 this.publicdeals.
--length 2 this.fields1.
const fieldsCtrls = {};
for (const f of this.fields) {
console.log('for lopp true=============');
}
this.form = new FormGroup(fieldsCtrls);
}
数据 1
console.log(this.publicDeals)
数据 2
console.log(this.fields1)
问题
在动态组件中访问 json this.publicDeals 其 field.length 为 0.
但是在访问 this.field1 时它 return 长度为 2.
我可以使用硬编码数组访问动态组件中的数据,但是从 api 服务呈现数据时出现问题。
您需要输入以下行:
this.p_col = this.publicDeals;
this.form = new FormGroup({
fields: new FormControl(this.publicDeals)
});
在 getOtherDetails() 中订阅函数
getOtherDetails() {
return this.personservice.getDatatableDetails()
.subscribe(persons => {
persons.FIELDS_FILTERS.forEach(element => {
this.publicDeals.push(element);
});
.....HERE....
});
考虑到 this.publicDeals 在调用完成之前没有任何价值
有效的解决方案
<app-dynamic-form-builder *ngIf="publicDeals.length > 0" [fields]="publicDeals"></app-dynamic-form-builder>
数据 1
[]
0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
length: 2
__proto__: Array(0)
数据 2
(2) [{…}, {…}]
0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
length: 2
__proto__: Array(0)
API Json
FIELDS_FILTERS: [
{
type: "text",
name: "first_name",
label: "First Name",
value: "",
required: true,
},
{
type: "text",
name: "last_name",
label: "Last Name",
value: "",
required: true,
},
],
Angular代码
export class DynamicFormsTestComponent implements OnInit {
publicDeals: Person[] = [];
public form: FormGroup;
public fields1: any[] = [
{
type: 'text',
name: 'first_name',
label: 'First Name',
value: '',
required: true,
},
{
type: 'text',
name: 'last_name',
label: 'Last Name',
value: '',
required: true,
},
];
p_col: any;
constructor(private httpClient: HttpClient, private http: Http, private formBuilder: FormBuilder,
private personservice: PersonService) {}
ngOnInit() {
this.getOtherDetails();
this.p_col = this.publicDeals;
this.form = new FormGroup({
fields: new FormControl(this.publicDeals)
});
}
getFields() {
return this.p_col; ----this don't works
-- return this.fields1; --this works
}
getOtherDetails() {
return this.personservice.getDatatableDetails()
.subscribe(persons => {
persons.FIELDS_FILTERS.forEach(element => {
this.publicDeals.push(element);
});
});
}
this.p_col
输出数据2,没问题
组件html
{{publicDeals|json}}
<app-dynamic-form-builder [fields]="getFields()"></app-dynamic-form-builder>
当我转储 json.
输出
[{
"type": "text",
"name": "first_name",
"label": "First Name",
"value": "",
"required": false
}, {
"type": "text",
"name": "last_name",
"label": "Last Name",
"value": "",
"required": false
}]
现在我已经在动态组件中将正确格式的数据发送为 data2,但是当尝试打印时 this.fields 数据格式变为数据 1。
如果我在动态组件中输出的是数据 2,那么我的代码就可以工作。
动态组件 ts
export class DynamicFormBuilderComponent implements OnInit {
// @Output() onSubmit = new EventEmitter();
@Input() fields: any[] = [];
form: FormGroup;
persons: Person[];
submitted = false;
constructor(private router: Router, private personservice: PersonService) { }
ngOnInit() {
console.log(this.fields);
console.log(typeof(this.fields)); --always return object
console.log(this.fields.length);
--length 0 this.publicdeals.
--length 2 this.fields1.
const fieldsCtrls = {};
for (const f of this.fields) {
console.log('for lopp true=============');
}
this.form = new FormGroup(fieldsCtrls);
}
数据 1
console.log(this.publicDeals)
数据 2
console.log(this.fields1)
问题
在动态组件中访问 json this.publicDeals 其 field.length 为 0.
但是在访问 this.field1 时它 return 长度为 2.
我可以使用硬编码数组访问动态组件中的数据,但是从 api 服务呈现数据时出现问题。
您需要输入以下行:
this.p_col = this.publicDeals;
this.form = new FormGroup({
fields: new FormControl(this.publicDeals)
});
在 getOtherDetails() 中订阅函数
getOtherDetails() {
return this.personservice.getDatatableDetails()
.subscribe(persons => {
persons.FIELDS_FILTERS.forEach(element => {
this.publicDeals.push(element);
});
.....HERE....
});
考虑到 this.publicDeals 在调用完成之前没有任何价值
有效的解决方案
<app-dynamic-form-builder *ngIf="publicDeals.length > 0" [fields]="publicDeals"></app-dynamic-form-builder>