Am使用角度5.x。我已经建立了这个JSON数据表单（html）。我需要迭代表单元素
{
"_id": "TTP93E5014288850",
"productId": 10353,
"updatedAt": "2018-10-01T12:49:37.197Z",
"createdAt": "2018-05-22T06:50:29.904Z",
"name": "Le Petit-déjeuner \"Parisien\"i6060",
"arName": "فطور باريسي",
"cost": 14.66,
"category": "Breakfast packages",
"arCategory": "لائحة الفطور",
"storeCode": "dev",
"ownerId": 300200,
"prodDescription": "",
"arProdDescription": "",
"sortIndex": 57,
"url": "http://tmmmt.com/dev/TTP93E5014288850",
"__v": 0,
"offerCost": 0,
"isVatIncluded": false,
"subType": "default",
"meals": {
"packages": [],
"isMandatory": true,
"types": []
},
"isDeleted": false,
"isVerified": true,
"isTimeBased": false,
"options": [
{
"option": "one hot beverage of your choice",
"arOption": " إختيارك من المشروبات الساخنة",
"_id": "5b03bdb533e27e3a4f318acf",
"isMandatory": true,
"isMulti": false,
"values": [
{
"value": "Cappuccino",
"arValue": "كابوتشينو",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ada"
},
{
"value": "Espresso",
"arValue": "اسبرسو",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad9"
},
{
"value": "Café crème",
"arValue": "قهوة بالكريمه",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad8"
},
{
"value": " American coffee",
"arValue": "قهوة اميريكيه",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad7"
},
{
"value": "PAUL hot chocolate",
"arValue": "شوكولاته ساخنه",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad6"
},
{
"value": " Flat white",
"arValue": "فلات وايت",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad5"
},
{
"value": "Marrocchino",
"arValue": " ماروشينو",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad4"
},
{
"value": "Cinnamon vanilla latté",
"arValue": " سينامون فانيلا لاتيه",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad3"
},
{
"value": "Caramel sticky mocha",
"arValue": "كراميل ستيكي موكا",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad2"
},
{
"value": " PAUL vanilla black tea",
"arValue": "شاي بول أسود بالفانيلا",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ad0"
}
]
},
{
"option": "one viennoiserie of your choice",
"arOption": " إختيارك من الفيينوازري ",
"_id": "5b03bdb533e27e3a4f318ac3",
"isMandatory": true,
"isMulti": false,
"values": [
{
"value": "Croissant",
"arValue": "كرواسان",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ace"
},
{
"value": "Croissant au thym",
"arValue": "كرواسان بالزعتر",
"price": 0,
"_id": "5b03bdb533e27e3a4f318acd"
},
{
"value": " Croissant au fromage",
"arValue": "كرواسان بالجبة",
"price": 0,
"_id": "5b03bdb533e27e3a4f318acc"
},
{
"value": "Croissant aux amandes",
"arValue": "كرواسان باللوز",
"price": 0,
"_id": "5b03bdb533e27e3a4f318acb"
},
{
"value": " Croissant aux pistaches",
"arValue": "كرواسان بالفستق",
"price": 0,
"_id": "5b03bdb533e27e3a4f318aca"
},
{
"value": " Anglaise aux abricots",
"arValue": " فطيرة كومبوت المشمش",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ac9"
},
{
"value": " Gourmandise au chocolat",
"arValue": "غورماديز الشكولاته",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ac8"
},
{
"value": " Pain au chocolat",
"arValue": "كرواسان الشكولاته",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ac7"
},
{
"value": "Pain aux raisins",
"arValue": "كعكة الزبيب",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ac6"
},
{
"value": "Pain au chocolat et amandes",
"arValue": "كرواسان الشكولاته واللوز",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ac5"
},
{
"value": " Pain au chocolat et pistaches",
"arValue": " كرواسان الشكولاته والفستق",
"price": 0,
"_id": "5b03bdb533e27e3a4f318ac4"
}
]
}
],
"linkType": "public",
"pictures": [],
"maxQuantity": 10,
"payType": "any",
"count": 50,
"isAvailable": true,
"vatPercentage": null,
"vatCost": null,
"baseCost": null,
"owner": null,
"isOffer": false,
"isCostOffer": false,
"isDeliveryOffer": false,
"id": "TTP93E5014288850"
}
如果您看到options键，则它是一个基于数组的数组，我拥有values，这也是一个数组，但是我使用此数据构建了一个表单。现在，我需要仅遍历值的表单元素。在下面添加我的角度代码。
initProductForm(product?: PublicProduct) {
const isOffer = product && product.offer && product.offer.startAt ? true : false;
this.productForm = this.fb.group({
storeCode: new FormControl(
{
value: product && product.storeCode ? product.storeCode : this.myStore._id,
disabled: true,
},
[Validators.required, Validators.pattern(/\S(.*\S)?/)]
),
ownerId: new FormControl(this.userPkid, Validators.required),
name: new FormControl(product && product.name ? product.name : '', [
Validators.required,
Validators.pattern(/\S(.*\S)?/),
]),
arName: new FormControl(product && product.arName ? product.arName : '', [
Validators.required,
Validators.pattern(/\S(.*\S)?/),
]),
prodDescription: new FormControl(
product && product.prodDescription ? product.prodDescription : '',
Validators.pattern(/\S(.*\S)?/)
),
arProdDescription: new FormControl(
product && product.arProdDescription ? product.arProdDescription : '',
Validators.pattern(/\S(.*\S)?/)
),
isTimeBased: new FormControl(product && product.isTimeBased ? product.isTimeBased : false),
startTime: new FormControl(
product && product.menuStartTime
? {
hour: moment(product.menuStartTime).hour(),
minute: moment(product.menuStartTime).minute(),
}
: '',
product && product.isTimeBased ? Validators.required : null
),
endTime: new FormControl(
product && product.menuEndTime
? {
hour: moment(product.menuEndTime).hour(),
minute: moment(product.menuEndTime).minute(),
}
: '',
product && product.isTimeBased ? Validators.required : null
),
menuStartTime: new FormControl(product && product.menuStartTime ? product.menuStartTime : ''),
menuEndTime: new FormControl(product && product.menuEndTime ? product.menuEndTime : ''),
cost: new FormControl(
{ value: product && product.cost ? product.cost : 0, disabled: isOffer },
[Validators.required, Validators.min(0)]
),
baseCost: new FormControl(
{
value:
product && product.baseCost
? product.baseCost
: this.calculateBaseAmount(
product && product.cost ? product.cost : 0,
(product && product.vatPercentage) || (product && product.vatPercentage == 0)
? product.vatPercentage
: this.vatPercentage
),
disabled: isOffer,
},
product && product.baseCost ? [(Validators.required, Validators.min(0))] : []
),
category: new FormControl(product && product.category ? product.category : '', [
Validators.required,
Validators.pattern(/\S(.*\S)?/),
]),
arCategory: new FormControl(product && product.arCategory ? product.arCategory : '', [
Validators.required,
Validators.pattern(/\S(.*\S)?/),
]),
payType: new FormControl(
product && product.payType ? product.payType : 'any',
Validators.required
),
imgFile: new FormControl(''),
pictures: new FormControl(product && product.pictures ? product.pictures : ''),
options: this.fb.array([]),
isVatIncluded: new FormControl(product && product.vatPercentage ? true : false),
vatPercentage: new FormControl(
(product && product.vatPercentage) || (product && product.vatPercentage == 0)
? product.vatPercentage
: this.vatPercentage
// disabled: true,
),
});
}
将一个单独的表单组附加到选项键
initOption() {
return this.fb.group({
option: new FormControl(''),
isMulti: new FormControl(false),
isMandatory: false,
values: this.fb.array([]),
});
}
initValue() {
return this.fb.group({
value: new FormControl(''),
price: new FormControl(''),
});
}
addOption(option?): void {
(<FormArray>this.productForm.controls['options']).push(
new FormGroup({
option: new FormControl(option ? option.option : '', Validators.required),
arOption: new FormControl(option ? option.arOption : '', Validators.required),
isMulti: new FormControl(option ? option.isMulti : false),
isMandatory: new FormControl(option ? option.isMandatory : false),
values: this.fb.array([]),
})
);
if (!option) {
this.addValue((<FormArray>this.productForm.controls.options).length - 1);
}
}
现在我的问题很简单，所有我想做的就是要遍历产品表单内的选项表单内的值表单。可能吗？。我这样尝试过，但无法正常工作
const syncBranchesControl = this.productForm.get('options');
(<FormArray>syncBranchesControl).controls.forEach((ctrl, index) => {
console.log(ctrl);
});
请记住，我已经建立了所需的表单，只是迭代选项表单。任何帮助表示赞赏，谢谢