带有primeng的Angular2复选框失败 [英] Angular2 checkbox with primeng fails

问题描述

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

I am using angular2 cli and this is the way i have setup my form

在组件中

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复选框

In the html template am using primeng checkbox like this

  <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）

The methods onpwdchange() and oncredchange() just have a console.log("clicked")

每当我选中复选框时出现错误

Whenever i check the checkboxes am getting an error

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

Ive已检查此primeng2问题，但是他们建议使用 disableDeprecatedForms（）和 provideForms（） angular2 cli

Ive checked on This primeng2 issue but they advice use of disableDeprecatedForms() and provideForms() which are not available in angular2 cli

我该如何解决这个问题

推荐答案

PrimeNG文档

https：// www .primefaces.org / primeng /＃/ checkbox

formControlName不适用于primeNG的复选框。

formControlName doesnt work with primeNG's checkbox.

所以您需要这样做

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

如果您想要二进制值true / false

if you want binary value true/false

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

这篇关于带有primeng的Angular2复选框失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！