Data 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)
Data 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 code
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 outputs data 2, which is fine
Component html
{{publicDeals|json}}
<app-dynamic-form-builder [fields]="getFields()"></app-dynamic-form-builder>
when I dump json.
Output
[{
"type": "text",
"name": "first_name",
"label": "First Name",
"value": "",
"required": false
}, {
"type": "text",
"name": "last_name",
"label": "Last Name",
"value": "",
"required": false
}]
Now I have send correct format data as data2 in dynamic component but when tried to print this.fields data format get changed into data 1.
If I output in dynamic component is data 2 then my code will work.
Dynamic component 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);
}
Data 1
console.log(this.publicDeals)
Data 2
console.log(this.fields1)
Problem
on accessing json this.publicDeals in dynamic component its field.length to 0.
but on accessing this.field1 it return length 2.
I can access data in dynamic component with hardcoded array but problem occurs while rendering data from api service.