I am trying to create a web form from a JSON file. I am getting some issues creating the form. My codes are as mentioned below:
JSON file data:
{
"objCountry": [{
"country": "United Arab Emirates",
"fields": [{
"name": "common",
"label": "Supplier Details",
"group": [{
"name": "supplierName",
"label": "Supplier Name *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierOrgType",
"label": "Tax Organization Type *",
"options": [{
"text": "-- Select --",
"value": ""
},
{
"text": "Individual/ Sole Proprietor",
"value": "Individual/ Sole Proprietor"
},
{
"text": "C Corporation",
"value": "C Corporation"
},
{
"text": "S Corporation",
"value": "S Corporation"
},
{
"text": "Partnership",
"value": "Partnership"
},
{
"text": "Trust / Estate",
"value": "Trust / Estate"
},
{
"text": "LLC - C Corporation",
"value": "LLC - C Corporation"
},
{
"text": "LLC - S Corporation",
"value": "LLC - S Corporation"
},
{
"text": "LLC - Partnership",
"value": "LLC - Partnership"
}
],
"value": "",
"required": true
},
{
"name": "businessClassification",
"label": "Business Classification *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierSsnNumber",
"label": "Tax ID/SSN *",
"type": "text",
"value": "",
"required": true
}
]
},
{
"name": "address",
"label": "Address Details",
"group": [{
"name": "txtSupplierCountry",
"label": "Country *",
"type": "text",
"value": "United Arab Emirates",
"required": true
},
{
"name": "txtAddressName",
"label": "Address Name *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtAddressLine1",
"label": "Address Line1 or P.O. Box Number *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtAddressLine2",
"label": "Address Line2",
"type": "text",
"value": "",
"required": false
},
{
"name": "txtEmirate",
"label": "Emirate *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtPostalCode",
"label": "Postal Code",
"type": "text",
"value": "",
"required": false
}
]
},
{
"name": "remittance",
"label": "Remittance Details",
"group": [{
"name": "supplierRemittanceEmail",
"label": "Remittance Email *",
"type": "email",
"value": "",
"required": true
},
{
"name": "supplierAccountNumber",
"label": "Account Number *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierRoutingNumber",
"label": "Routing Number *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierPaymentMethod",
"label": "Payment Method",
"type": "select",
"options": [{
"text": "-- Select --",
"value": ""
},
{
"text": "ACH",
"value": "ACH"
},
{
"text": "Wire",
"value": "Wire"
},
{
"text": "Intl/ Sepa",
"value": "Intl/ Sepa"
}
],
"value": "",
"required": true
},
{
"name": "supplierPaymentCurrency",
"label": "Payment Currency *",
"type": "select",
"options": [{
"text": "-- Select --",
"value": ""
},
{
"text": "USD - US Dollar",
"value": "USD - US Dollar"
},
{
"text": "AED - UAE Dirham",
"value": "AED - UAE Dirham"
},
{
"text": "AUD - Australian Dollar",
"value": "AUD - Australian Dollar"
},
{
"text": "CAD - Canadian Dollar",
"value": "CAD - Canadian Dollar"
},
{
"text": "CNY - Yuan Renminbi",
"value": "CNY - Yuan Renminbi"
},
{
"text": "EUR - Euro",
"value": "EUR - Euro"
},
{
"text": "GBP - Pound Sterling",
"value": "GBP - Pound Sterling"
},
{
"text": "HKD - Hong Kong Dollar",
"value": "HKD - Hong Kong Dollar"
}
],
"value": "",
"required": true
},
{
"name": "supplierPaymentTerms",
"label": "Payment Terms *",
"type": "select",
"options": [{
"text": "-- Select --",
"value": ""
},
{
"text": "Net 120",
"value": "Net 120"
},
{
"text": "Net 105",
"value": "Net 105"
},
{
"text": "Net 90",
"value": "Net 90"
},
{
"text": "Net 85",
"value": "Net 85"
},
{
"text": "Net 75",
"value": "Net 75"
},
{
"text": "Net 65",
"value": "Net 65"
},
{
"text": "Net 60",
"value": "Net 60"
},
{
"text": "Net 55",
"value": "Net 55"
}
],
"value": "",
"required": true
},
{
"name": "termsDateBasis",
"label": "Terms Date Basis *",
"type": "text",
"value": "",
"required": true
}
]
}
]
},
{
"country": "Australia",
"fields": [
{
"name": "common",
"label": "Supplier Details",
"group": [
{
"name": "supplierName",
"label": "Supplier Name *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierOrgType",
"label": "Tax Organization Type *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "Individual/ Sole Proprietor",
"value": "Individual/ Sole Proprietor"
},
{
"text": "C Corporation",
"value": "C Corporation"
},
{
"text": "S Corporation",
"value": "S Corporation"
},
{
"text": "Partnership",
"value": "Partnership"
},
{
"text": "Trust / Estate",
"value": "Trust / Estate"
},
{
"text": "LLC - C Corporation",
"value": "LLC - C Corporation"
},
{
"text": "LLC - S Corporation",
"value": "LLC - S Corporation"
},
{
"text": "LLC - Partnership",
"value": "LLC - Partnership"
}
],
"value": "",
"required": true
},
{
"name": "businessClassification",
"label": "Business Classification *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierSsnNumber",
"label": "Tax ID/SSN *",
"type": "text",
"value": "",
"required": true
}
]
},
{
"name": "address",
"label": "Address Details",
"group": [
{
"name": "txtSupplierCountry",
"label": "Country *",
"type": "text",
"value": "Australia",
"required": true
},
{
"name": "txtAddressName",
"label": "Address Name *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtAddressLine1",
"label": "Address Line1 *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtAddressLine2",
"label": "Address Line2",
"type": "text",
"value": "",
"required": false
},
{
"name": "txtAddressLine3",
"label": "Address Line3",
"type": "text",
"value": "",
"required": false
},
{
"name": "txtCity",
"label": "City *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtState",
"label": "State",
"type": "text",
"value": "",
"required": false
},
{
"name": "txtPostalCode",
"label": "Postal Code",
"type": "text",
"value": "",
"required": false
}
]
},
{
"name": "remittance",
"label": "Remittance Details",
"group": [
{
"name": "supplierRemittanceEmail",
"label": "Remittance Email *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierAccountNumber",
"label": "Account Number *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierRoutingNumber",
"label": "Routing Number *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierPaymentMethod",
"label": "Payment Method *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "ACH",
"value": "ACH"
},
{
"text": "Wire",
"value": "Wire"
},
{
"text": "Intl/ Sepa",
"value": "Intl/ Sepa"
}
],
"value": "",
"required": true
},
{
"name": "supplierPaymentCurrency",
"label": "Payment Currency *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "USD - US Dollar",
"value": "USD - US Dollar"
},
{
"text": "AED - UAE Dirham",
"value": "AED - UAE Dirham"
},
{
"text": "AUD - Australian Dollar",
"value": "AUD - Australian Dollar"
},
{
"text": "CAD - Canadian Dollar",
"value": "CAD - Canadian Dollar"
},
{
"text": "CNY - Yuan Renminbi",
"value": "CNY - Yuan Renminbi"
},
{
"text": "EUR - Euro",
"value": "EUR - Euro"
},
{
"text": "GBP - Pound Sterling",
"value": "GBP - Pound Sterling"
},
{
"text": "HKD - Hong Kong Dollar",
"value": "HKD - Hong Kong Dollar"
}
],
"value": "",
"required": true
},
{
"name": "supplierPaymentTerms",
"label": "Payment Terms *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "Net 120",
"value": "Net 120"
},
{
"text": "Net 105",
"value": "Net 105"
},
{
"text": "Net 90",
"value": "Net 90"
},
{
"text": "Net 85",
"value": "Net 85"
},
{
"text": "Net 75",
"value": "Net 75"
},
{
"text": "Net 65",
"value": "Net 65"
},
{
"text": "Net 60",
"value": "Net 60"
},
{
"text": "Net 55",
"value": "Net 55"
}
],
"value": "",
"required": true
},
{
"name": "termsDateBasis",
"label": "Terms Date Basis *",
"type": "text",
"value": "",
"required": true
}
]
}
]
},
{
"country": "Austria",
"fields": [
{
"name": "common",
"label": "Supplier Details",
"group": [
{
"name": "supplierName",
"label": "Supplier Name *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierOrgType",
"label": "Tax Organization Type *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "Individual/ Sole Proprietor",
"value": "Individual/ Sole Proprietor"
},
{
"text": "C Corporation",
"value": "C Corporation"
},
{
"text": "S Corporation",
"value": "S Corporation"
},
{
"text": "Partnership",
"value": "Partnership"
},
{
"text": "Trust / Estate",
"value": "Trust / Estate"
},
{
"text": "LLC - C Corporation",
"value": "LLC - C Corporation"
},
{
"text": "LLC - S Corporation",
"value": "LLC - S Corporation"
},
{
"text": "LLC - Partnership",
"value": "LLC - Partnership"
}
],
"value": "",
"required": true
},
{
"name": "businessClassification",
"label": "Business Classification *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierSsnNumber",
"label": "Tax ID/SSN *",
"type": "text",
"value": "",
"required": true
}
]
},
{
"name": "address",
"label": "Address Details",
"group": [
{
"name": "txtSupplierCountry",
"label": "Country *",
"type": "text",
"value": "Austria",
"required": true
},
{
"name": "txtAddressName",
"label": "Address Name *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtAddressLine1",
"label": "Address Line1 *",
"type": "text",
"value": "",
"required": true
},
{
"name": "txtAddressLine2",
"label": "Address Line2",
"type": "text",
"value": "",
"required": false
},
{
"name": "txtPostalCode",
"label": "Postal Code *",
"type": "text",
"value": "",
"required": false
}
,
{
"name": "txtCity",
"label": "City *",
"type": "text",
"value": "",
"required": true
}
]
},
{
"name": "remittance",
"label": "Remittance Details",
"group": [
{
"name": "supplierRemittanceEmail",
"label": "Remittance Email *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierAccountNumber",
"label": "Account Number *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierRoutingNumber",
"label": "Routing Number *",
"type": "text",
"value": "",
"required": true
},
{
"name": "supplierPaymentMethod",
"label": "Payment Method *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "ACH",
"value": "ACH"
},
{
"text": "Wire",
"value": "Wire"
},
{
"text": "Intl/ Sepa",
"value": "Intl/ Sepa"
}
],
"value": "",
"required": true
},
{
"name": "supplierPaymentCurrency",
"label": "Payment Currency *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "USD - US Dollar",
"value": "USD - US Dollar"
},
{
"text": "AED - UAE Dirham",
"value": "AED - UAE Dirham"
},
{
"text": "AUD - Australian Dollar",
"value": "AUD - Australian Dollar"
},
{
"text": "CAD - Canadian Dollar",
"value": "CAD - Canadian Dollar"
},
{
"text": "CNY - Yuan Renminbi",
"value": "CNY - Yuan Renminbi"
},
{
"text": "EUR - Euro",
"value": "EUR - Euro"
},
{
"text": "GBP - Pound Sterling",
"value": "GBP - Pound Sterling"
},
{
"text": "HKD - Hong Kong Dollar",
"value": "HKD - Hong Kong Dollar"
}
],
"value": "",
"required": true
},
{
"name": "supplierPaymentTerms",
"label": "Payment Terms *",
"type": "select",
"options": [
{
"text": "-- Select --",
"value": ""
},
{
"text": "Net 120",
"value": "Net 120"
},
{
"text": "Net 105",
"value": "Net 105"
},
{
"text": "Net 90",
"value": "Net 90"
},
{
"text": "Net 85",
"value": "Net 85"
},
{
"text": "Net 75",
"value": "Net 75"
},
{
"text": "Net 65",
"value": "Net 65"
},
{
"text": "Net 60",
"value": "Net 60"
},
{
"text": "Net 55",
"value": "Net 55"
}
],
"value": "",
"required": true
},
{
"name": "termsDateBasis",
"label": "Terms Date Basis *",
"type": "text",
"value": "",
"required": true
}
]
}
]
}
]
}
here is my supplier component.ts code
export class SupplierComponent implements OnInit{
countryName!: string;
lstCountry!: Country[];
filterForm!: FormGroup;
filterFields!: any[];
constructor(
private route: ActivatedRoute,
private countryService: CountryService,
private fb: FormBuilder
) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.countryName = params['country'];
});
console.log(this.countryName);
let lstCountry = this.countryService.getCountryList(this.countryName);
this.filterFields = JSON.parse(JSON.stringify(lstCountry));
console.log(this.filterFields);
}
onSubmit() {
// if (this.form.valid) {
// let value = this.form.value;
//}
}
}
I am getting data on filterFields on the basis of country in this format
fields:
Here is my component.html code
<div class="container">
<div class="card border-info">
<div class="card-header border-info">
<h3>Supplier-Vendor</h3>
</div>
<div class="card-body">
<div>
<div class="row mb3">
<div class="mb-3" *ngFor="let field of this.filterFields[0].fields">
<h4>{{field.label}}</h4>
</div>
<div class="col-md-3" *ngFor="let fld of field.group">
<label for="field.name" class="form-label">{{fld.label}}</label>
<ng-container *ngIf="fld.type==='text'">
<input type="text" [name]="fld.name" [required]="fld.required" [value]="fld.value" class="form-control">
</ng-container>
<ng-container *ngIf="fld.type==='email'">
<input type="email" [name]="fld.name" [required]="fld.required" [value]="fld.value" class="form-control">
</ng-container>
<ng-container *ngIf="fld.type==='select'">
<select [name]="fld.name" [required]="fld.required" class="form-select">
<option *ngFor="let option of fld.options" [value]="option.value">{{option.text}}</option>
</select>
</ng-container>
</div>
</div>
<div class="row mb3">
<button type="submit">SUBMIT</button>
</div>
</div>
</div>
</div>
</div>
My first *ngFor will create the form group then the next *ngFor will create the subsequent fields under a form group. I am getting errors in 2nd loop. Please anyone guide me on where I am doing wrong.
Thanks in advance.
