我只想在该 id 具有如下值时显示动态表单？我该如何处理它？

Question

我有来自后端的对象，像这样 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;
    });
}

Answer 1

创建表单组：

 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>

Demo

我只想在该 id 具有如下值时显示动态表单？我该如何处理它？

I want to display a dynamic form only when there are values for that id as below?How can i approach it?

angular

angular-reactive-forms

dynamic-forms