带有primeng的Angular2复选框失败答案

【问题标题】：Angular2 checkbox with primeng fails带有primeng的Angular2复选框失败
【发布时间】：2017-06-15 05:09:29
【问题描述】：

我正在使用 angular2 cli，这就是我设置表单的方式

在组件中

export class UsersAddComponent implements OnInit {

 ngOnInit() {
    this.userForm = this._formBuilder.group({
      role: ['', [Validators.required]],
      others: this._formBuilder.array([])  //for adding multipe form inputs
    });

   this.addNewUser();

  }

  initAddress() {
     return this._formBuilder.group({     
       sendcred: [''],  //checkbox needs no validation in my logic
        needs_reset: [''], // ''
        .....other fields here
    });
 }


  addNewUser() {  //this is called whenever add new user button is clicked
     const control = <FormArray>this.userForm.controls['others'];
     const addrCtrl = this.initAddress();
     control.push(addrCtrl);
   }

在 html 模板中使用这样的primeng复选框

  <p-checkbox formControlName="needs_reset" label="User has to set password" 
   (onChange)="Onpwdchange()"></p-checkbox>

  <p-checkbox formControlName="sendcred" name="send cred"  label="Send user
 login credentials " (onChange)="Oncredchange()"></p-checkbox>

onpwdchange() 和 oncredchange() 方法只有一个 console.log("clicked")

每当我检查复选框时都会出错

this.model.push is not a function  //i havent implemented push method anywhere

我检查了This primeng2 issue，但他们建议使用 angular2 cli 中不可用的 disableDeprecatedForms() 和 provideForms()

我该如何解决这个问题

【问题讨论】：

disableDeprecatedForms 和 provideForms 是古代历史（预决赛）
所以我的问题有解决办法吗
对不起，不知道。几个月以来没有对表格做太多事情。
好的，感谢您一直以来的支持
Primeafaces != PrimeNG

标签： angular typescript checkbox

【解决方案1】：

根据 PrimeNG 文档

https://www.primefaces.org/primeng/#/checkbox

formControlName 不适用于 primeNG 的复选框。

所以你需要这样做

<p-checkbox value="xyz" [formControl]="myFormGroup.controls['name']"></p-checkbox>

如果你想要二进制值真/假

<p-checkbox binary="true" [formControl]="myFormGroup.controls['name']"></p-checkbox>

【讨论】：

两天我一直在寻找发送“真实”价值。那个“二进制”属性解决了这个问题。非常感谢。
一旦我设置binary=true formControlName=... 部分适用于 PrimeNg 9.0.0

【解决方案2】：

如下初始化表单值

文件.ts

this.infraestructuraServiciosForm = this.fb.group({
     ....
     complementarios : new FormControl('', []),
     ......
});

以下行避免了错误：

this.infraestructuraServiciosForm.controls['complementarios'].setValue([]);

文件.html

<p-fieldset legend="Complementarios">
            <body>
                <div class="ui-g ui-fluid">
                     <div class="ui-g-12">
                        <div class="ui-g-3">
                            <p-checkbox name="cpl" value="acerasBordillos" label="Aceras y Bordillos" formControlName="complementarios" (onChange)="haCambiadoAcerasBordillos(checked)"></p-checkbox>
                        </div>
                        <div class="ui-g-3">
                            <p-checkbox name="cpl" value="soloBordillos" label="Solo Bordillos" formControlName="complementarios" (onChange)="haCambiadoSoloBordillos(checked)"></p-checkbox>         
                        </div>
                        <div class="ui-g-3">
                            <p-checkbox name="cpl" value="telefonoFijo" label="Red de Teléfono Fijo" formControlName="complementarios"></p-checkbox>      
                        </div>          
                        <div class="ui-g-3">
                            <p-checkbox name="cpl" value="alumbradoPublico" label="Alumbrado Público" formControlName="complementarios"></p-checkbox>                              
                        </div>
                    </div>                                     
                </div>
            </body>
        </p-fieldset>

【讨论】：