mardi 2 mai 2017

How to display checkbox values on screen if it is checekd using formGroup Angular2

I am angular2 beginner. I am try to display checkbox values on screen if checkbox is checked and checkbox is unchecked so remove the value. I am use formGroup and formArray in angular2.

Html code here :-

<form [formGroup] = "testForm">

  <div formArrayName="extras">
    <span  *ngFor="let extra of extras; let i = index" formGroupName="">
        <label class="btn btn-primary" formControlName="" btnCheckbox  [(ngModel)] = "extra.status"></label>
    </span> 
  </div>
</form>
<!-- Display values of extras -->
<div *ngIf="getFormValues?.extras">
   <span  *ngFor="let extra of getFormValues?.extras; let i = index>
     
   </span>
</div>

Component.ts code here

extras:any = [
  { value: 'good', display: 'good', status: 'false'},
  { value: 'bed', display: 'bed', status: 'false'},
  { value: 'nice', display: 'bed', status: 'false'},
]

let allextras: FormArray = new FormArray([]);
for (let i = 0; i < this.extras.length; i++) {
  let fg = new FormGroup({});
  fg.addControl(this.extras[i].value, new FormControl(false))
  allextras.push(fg)
}

this.testForm.valueChanges.subscribe( (form: any) => {
  this.getFormValues = form;
});

This code is work well but does not display value of checkbox if checked the checkbox and visa versa. Thanks!




Aucun commentaire:

Enregistrer un commentaire