带有数组的反应形式的primeng复选框

Posted 2023-03-05

【中文标题】带有数组的反应形式的primeng复选框

【英文标题】：primeng checkbox with reactive form with array

【发布时间】：2020-05-29 16:00:38

【问题描述】：

我正在尝试添加我的对象数组以映射primeng复选框，并希望获取选定复选框的值。

我尝试过 FormControlName，但提交后它抛出 undefined。

下面是粗略的代码

data = [
     type: dropdown
      text: 'drop',
      num: 1.23,
      options: [
      
       value=1,
       text= 'drop1
      ,
       value=2,
       text= 'drop2
      
      ]
    ,
     type: checkbox
      text: 'check',
      num: 1.23,
      options: [
      
       value=1,
       text= 'check1
      ,
       value=2,
       text= 'check2
      
      ]
    ,
     type: radio
      text: 'radio',
      num: 1.23,
      options: [
      
       value=1,
       text= 'radio1
      ,
       value=2,
       text= 'radio2
      
      ]
    ,
  ];

模板：

<form [formGroup]="group">

  <div *ngFor="let d of data">
  <div *ngSwitchCase = "checkbox">
    <p-checkbox *ngFor="let check of options"  [value]="check.value" [formControlName]="check.text"></p-checkbox>
    </div>
    <div *ngSwitchCase = "dropdown">
  <p-dropdown *ngFor="let drop of options" [value]="drop.value" [formControlName]="d.text"> drop.text
   </p-dropdown>
  </div>
   <div *ngSwitchCase = "radio">
    <p-radioButton  *ngFor="let radio of options"[value]="radio.value" [formControlName]="d.text"></p-radioButton >
  </div>
  </div>
 </form>

如何让我的控件的引用和下拉框和复选框的值相同。

如何获取动态表单的值？

【问题讨论】：

[ngSwitch]在哪里

【参考方案1】：

对于响应式动态表单，我们首先必须生成表单控件数据的 formGroup 基础

getFormGroup 方法将通过循环数据返回一个 formGroup 对象，并创建一个名称为text 值的表单控件。

getFormGroup() 
    
    const formControls = this.data.reduce( (controls , f:FormControl)=>

      controls[f.text] = this.formBuilder.control(null);
      return controls;

    ,);

    return this.formBuilder.group(formControls)
  

生成表单后，现在我们可以在模板上呈现表单控件

<form [formGroup]="form">

    <div *ngFor="let d of data">

        <ng-container [ngSwitch]="d.type">

            <label for="">d.text</label>
            <div *ngSwitchCase="'checkbox'">
                <p-checkbox *ngFor="let check of d.options" [label]="check.label" [value]="check.value"
                    [formControlName]="d.text"></p-checkbox>
            </div>

            <div *ngSwitchCase="'dropdown'">
                <p-dropdown [options]="d.options" [formControlName]="d.text">
                </p-dropdown>
            </div>

            <div *ngSwitchCase="'radio'">

                <p-radioButton *ngFor="let radio of d.options" [name]="d.text" [label]="radio.label"
                    [value]="radio.value" [formControlName]="d.text">
                </p-radioButton>

            </div>

        </ng-container>
    </div>
</form>

stackblitz demo ?

【讨论】：

@malbarmvi ..对不起不同的主题..你能帮我获取所选选项的 ng-select 标题的示例..我有获取选项标题的示例，但我寻找选定的项目标题。 J 正在寻找以下示例...stackblitz.com/edit/angular-wziwui?file=src/app/…

@atitpatel 你能告诉我更多细节吗我不知道是什么问题，我查看了演示但仍然不知道问题??

在这个例子中... stackblitz.com/edit/angular-wziwui?file=src/app/... 我选择第一个选项.. "Loreum ....." 选择后...我们可以看到所选项目...当我将鼠标悬停在所选值上时...我希望看到标题（因为名称太大，用户无法看到完整值）与我打开下拉选项并将鼠标悬停在上方时相同。 .. 我可以看到标题... – atit patel 3 小时前 删除