mercredi 25 juillet 2018

sending Angular 6 form including checkbox values not working with template driven forms

I'm trying to pass form values including checkboxes in angular 6 forms using formbuilder but I'm unable to read the value from checkbox. I am getting all the values from all the other input fields but only checkbox is not responding Here is my code:

<form [formGroup]="myGroup" (submit)="submit(myGroup.value)">
    <div class="row">
      <div class="col-sm-4" *ngFor="let info of myGroup.controls['myInfo'].controls; let i = index">

            <label for=""> 
            <input type="" class="" [formControl]="info">
          </label>

      </div>
    </div>

<div class="row">
  <button class="form-control btn-sub" type=”submit”>
    Submit Details
  </button>
</div>

My component class:

import { ProposalService, CustomerDetails, ProposalNumber } from 'src/app/Services/Proposal-service/proposal.service';

export interface InputType{
  name:string;
  type: string;
  label: string;

  class:string;
}
export class ProposalComponent implements OnInit {

  public labelValue: InputType[] = [
  {name:"fname",type:"text",label:"First Name", class:"form-control"},
  {name:"form60",type:"checkbox",label:"Is Collection Of form 60", class:"form-control"},
  {name:"eia-num",type:"number",label:"EIA Number", class:"form-control"}
];
  title = "Customer Details";
  details: Observable<CustomerDetails>;
  pNumber: ProposalNumber ;

  public information: CustomerDetails[] = [
    {name:"First Name", value:""},//
 {name:"IsCollectionOfform60", value:true},
    {name:"EIA Number", value:""}
  ];

  myGroup : FormGroup;

  constructor(private formBuilder: FormBuilder,
   private _proposalService: ProposalService) { }

  ngOnInit() {

  this.myGroup = this.formBuilder.group({
    myInfo: this.constructFormArray()
  });

  this.pNumber = <ProposalNumber>{proposalNumber: 0 ,message:"", status: ""};

  } 


  constructFormArray()
  {
    const arr = this.information.map(cat => {
      return this.formBuilder.control(cat.value);
    });
    return this.formBuilder.array(arr);

  }


  submit(form){
    //this.loading = true;
    console.log(form);
    let mySelectedAddon = form.myInfo.map((currentValue,i)=> {
      return { "name" : this.information[i].name , "value" : currentValue} 
      }
    );
    console.log(mySelectedAddon);
    this._proposalService.loadCustomer(mySelectedAddon).subscribe((res: ProposalNumber) =>{
      //this.loading = false;
        console.log(res);
        this.pNumber.proposalNumber = res.proposalNumber;
        this.pNumber.message = res.message;
        console.log(this.pNumber.proposalNumber);
        return this.myGroup.value;
  });
}
}




Aucun commentaire:

Enregistrer un commentaire