带有 primeng 的 Angular2 复选框失败

Question

我正在使用 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但他们建议使用 disableDeprecatedForms() 和 provideForms() 这在 angular2 cli 中不可用

我该如何解决这个问题

Answer 1

根据 PrimeNG 文档

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

formControlName 不适用于 primeNG 的复选框。

所以你需要这样做

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

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

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