[英]FormArray - How to pass a string array to it?
这是我的 FormGroup:
this.productGroup = this.fb.group({
name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])],
variants: this.fb.array([
this.fb.group({
type: '',
options: this.fb.array([])
})
])
});
如何将字符串数组传递给options
? 像这样[ 'string1', 'string2' ]
。 我在这里动态地获取这些值: stackblitz ,但是我不确定如何填充数组。 我想将通用字符串数组直接传递给options
。
variants
数组示例:
variants: [
{ type: 'Color', options: ['Red', 'Blue'] },
{ type: 'Size', options: ['Small', 'Medium', 'Big'] }
]
网址:
<form [formGroup]="productGroup">
<input formControlName="name">
<div formArrayName="variants" *ngFor="let item of productGroup.controls['variants'].controls; let i = index;">
<div [formGroupName]="i">
<mat-form-field>
<input type="text" placeholder="Variable Type" aria-label="Number" matInput formControlName="type" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let type of types" [value]="type">
{{type}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field>
<mat-chip-list #chipList>
<mat-chip *ngFor="let opt of typesOptionsArray[i]" [selectable]="true"
[removable]="true" (removed)="removeOpt(opt, i)">
{{opt}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input placeholder="Type Options"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addOpt($event, i)">
</mat-chip-list>
</mat-form-field>
</div>
<div class="row">
<a href="javascript:" (click)="addItem()"> Add Variant </a>
<a href="javascript:" (click)="removeItem(i)" *ngIf="i > 0"> Remove Variant </a>
</div>
</div>
</form>
我在stackblitz上创建了一个示例应用程序, 用于在 options 数组中添加数组值。
我建议不要创建选项字段的 FormArray,而是尝试创建 FormControl。 我已经更改了创建 FormGroup 的代码。
这是表单组的代码。
this.productGroup = this.fb.group({
name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])],
variants: this.fb.array([
this.fb.group({
type: '',
options: ''
})
])
});
我在组件 'addOption' 和 'removeOption' 中添加了两个方法,同时添加选项,此时您需要将字符串推送到选项数组中。
这是代码:
let variants = <FormArray>this.productGroup.controls.variants;
let variantFormGroup = <FormGroup>variants.controls[0];
let optionValue = variantFormGroup.controls.options.value;
if(!optionValue)
optionValue = [];
optionValue.push(`chip${this.currentIndex}`); // push your actutal string value
variantFormGroup.controls.options.setValue(optionValue);
this.currentIndex++; //don't consider this, this is just for adding new name
这是从选项数组中删除字符串值的代码
let optionValue = this.productGroup.value.variants[0].options;
if(optionValue.length > 0){
//let indexOf = optionValue.indexOf(removeValue); find the index number with your value.
optionValue.splice(0,1);
let variants = <FormArray>this.productGroup.controls.variants;
let variantFormGroup = <FormGroup>variants.controls[0];
variantFormGroup.controls.options.setValue(optionValue);
}
这是在选项数组中添加几个值后的 json 结果:
{ "name": "", "variants": [ { "type": "", "options": [ "chip4", "chip5", "chip6", "chip7", "chip8" ] } ] }
如果您有任何问题,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.