我只想在该 id 具有如下值时显示动态表单?我该如何处理它?
I want to display a dynamic form only when there are values for that id as below?How can i approach it?
我有来自后端的对象,像这样 template_parameter: "namespace,resources",对于某些 id,它是 template_parameter: "null"。当 template_parameter: "namespace,resources" 中有一些值时,我想显示一个包含这些字段的表单。如果它为空,我不想显示,我如何处理 this.I 拆分值,但我正在尝试编写一个代码,它只在有一些值时显示一个表单。希望你明白我的问题。感谢你的帮助。谢谢你。
Html:
<form [formGroup]="templateform">
<div class="form-group">
<label for="ntw-pol-egren-podns" class="bmd-label-floating">{{variable1}}<sup
class="text-danger">*</sup>
</label>
<input [(ngModel)]="namespace" formControlName="namespace" type="text" class="form-control" id="ntw-pol-egren-podns">
<div *ngIf="submitted && f.namespace.errors" class="error-feedback error">
<p *ngIf="f.namespace.errors.required" class="text-danger">
Namespace is required
</p>
</div>
</div>
<div class="form-group">
<label for="ntw-pol-egren-podns" class="bmd-label-floating">{{variable2}}<sup
class="text-danger">*</sup></label>
<input type="text" class="form-control" formControlName="resource" [(ngModel)]="resources" id="ntw-pol-egren-podns">
<div *ngIf="submitted && f.resource.errors" class="error-feedback error">
<p *ngIf="f.resource.errors.required" class="text-danger ">
Resource is required
</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button (click)="sendclusteridApi()" class="btn btn-primary px-3 py-2">Save</button>
</div>
</form>
ts:
changeSelection() {
this.selectedItemsList = this.DisplayProductList.filter((product, index) => {
this.selectedItemsList.push(this.DisplayProductList[index])
console.log(this.selectedItemsList,"sel")
let splitstring = this.DisplayProductList[index].template_parameter
console.log(splitstring,"df")
let sepratedArray = splitstring.split(',');
this.variable1 = sepratedArray[0];
this.variable2 = sepratedArray[1];
return product.isChecked;
});
}
创建表单组:
productFG: FormGroup;
遍历 this.DisplayProductList
数组并为每个条目创建 FormGroup
const productFArray = this.DisplayProductList.map(obj =>
this.createFormGroup(obj)
);
this.productFG = this.fb.group({
policies: this.fb.array(productFArray)
});
创建 FormGroup
,为 Id
、label
和 template_parameter
动态创建控件,我们将创建名为 additionalParams
的嵌套 FormGroup
private createFormGroup(obj): FormGroup {
return this.fb.group({
id: [obj.id],
label: [obj.label],
additionalParams: this.formGroupByTemplate(obj.template_parameter)
});
}
private formGroupByTemplate(template_parameter: string): FormGroup {
const splitted = template_parameter.split(',');
if (template_parameter == '') {
return this.fb.group({});
} else {
const formGroup = this.fb.group({});
splitted.forEach(val => formGroup.addControl(val, this.fb.control(null)));
return formGroup;
}
}
其他 helper getters
get policiesFormArray(): FormArray {
return this.productFG.get('policies') as FormArray;
}
getGroup(index: number): FormGroup {
return this.policiesFormArray.at(index) as FormGroup;
}
getTemplateFG(index: number): FormGroup {
return this.getGroup(index).get('additionalParams') as FormGroup;
}
getFormGroupKeys(index): string[] {
return Object.keys(this.getTemplateFG(index).controls);
}
在模板中:使用 getFormGroupKeys
从 additionalParams
FormGroup 中检索 formControlName
。
<form [formGroup]="productFG">
<div formArrayName="policies">
<div *ngFor="let control of policiesFormArray.controls; let i=index">
<div [formGroupName]="i">
<div> {{ "Id : "+ getGroup(i).get('id').value }} - {{ getGroup(i).get('label').value }} </div>
<div formGroupName="additionalParams" *ngFor="let key of getFormGroupKeys(i);">
{{ key }} : <input type="text" [formControlName]="key"><br><br>
</div>
</div>
</div>
</div>
</form>
<form [formGroup]="templateform">
<div class="form-group">
<label for="ntw-pol-egren-podns" class="bmd-label-floating">{{variable1}}<sup
class="text-danger">*</sup>
</label>
<input [(ngModel)]="namespace" formControlName="namespace" type="text" class="form-control" id="ntw-pol-egren-podns">
<div *ngIf="submitted && f.namespace.errors" class="error-feedback error">
<p *ngIf="f.namespace.errors.required" class="text-danger">
Namespace is required
</p>
</div>
</div>
<div class="form-group">
<label for="ntw-pol-egren-podns" class="bmd-label-floating">{{variable2}}<sup
class="text-danger">*</sup></label>
<input type="text" class="form-control" formControlName="resource" [(ngModel)]="resources" id="ntw-pol-egren-podns">
<div *ngIf="submitted && f.resource.errors" class="error-feedback error">
<p *ngIf="f.resource.errors.required" class="text-danger ">
Resource is required
</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button (click)="sendclusteridApi()" class="btn btn-primary px-3 py-2">Save</button>
</div>
</form>
ts:
changeSelection() {
this.selectedItemsList = this.DisplayProductList.filter((product, index) => {
this.selectedItemsList.push(this.DisplayProductList[index])
console.log(this.selectedItemsList,"sel")
let splitstring = this.DisplayProductList[index].template_parameter
console.log(splitstring,"df")
let sepratedArray = splitstring.split(',');
this.variable1 = sepratedArray[0];
this.variable2 = sepratedArray[1];
return product.isChecked;
});
}
创建表单组:
productFG: FormGroup;
遍历 this.DisplayProductList
数组并为每个条目创建 FormGroup
const productFArray = this.DisplayProductList.map(obj =>
this.createFormGroup(obj)
);
this.productFG = this.fb.group({
policies: this.fb.array(productFArray)
});
创建 FormGroup
,为 Id
、label
和 template_parameter
动态创建控件,我们将创建名为 additionalParams
的嵌套 FormGroup
private createFormGroup(obj): FormGroup {
return this.fb.group({
id: [obj.id],
label: [obj.label],
additionalParams: this.formGroupByTemplate(obj.template_parameter)
});
}
private formGroupByTemplate(template_parameter: string): FormGroup {
const splitted = template_parameter.split(',');
if (template_parameter == '') {
return this.fb.group({});
} else {
const formGroup = this.fb.group({});
splitted.forEach(val => formGroup.addControl(val, this.fb.control(null)));
return formGroup;
}
}
其他 helper getters
get policiesFormArray(): FormArray {
return this.productFG.get('policies') as FormArray;
}
getGroup(index: number): FormGroup {
return this.policiesFormArray.at(index) as FormGroup;
}
getTemplateFG(index: number): FormGroup {
return this.getGroup(index).get('additionalParams') as FormGroup;
}
getFormGroupKeys(index): string[] {
return Object.keys(this.getTemplateFG(index).controls);
}
在模板中:使用 getFormGroupKeys
从 additionalParams
FormGroup 中检索 formControlName
。
<form [formGroup]="productFG">
<div formArrayName="policies">
<div *ngFor="let control of policiesFormArray.controls; let i=index">
<div [formGroupName]="i">
<div> {{ "Id : "+ getGroup(i).get('id').value }} - {{ getGroup(i).get('label').value }} </div>
<div formGroupName="additionalParams" *ngFor="let key of getFormGroupKeys(i);">
{{ key }} : <input type="text" [formControlName]="key"><br><br>
</div>
</div>
</div>
</div>
</form>