mardi 15 décembre 2020

My status value is by default taking null/N value. need to fix it depending on its checked/unchecked state

This is html:

I'm retriving data using service in checkbox. if Y the checkbox will be checked. this is my edit page and i want to update status as Y if checked and N if uncheked.

 <form [formGroup]="addTermForm">
                    <div class="container">
                      <div class="row ">
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                          <label for="rule">Incentive Type:</label>
                          <input type="text" class="form-control" placeholder="Enter incentive type"
                          formControlName="incentivetype_name" 
                          [(ngModel)]="termDetails.incentivetype_name" [ngClass]="{ 'is-invalid': submitted &amp;&amp; addTermForm.controls.incentivetype_name.errors }">   
                
                          <div *ngIf="submitted &amp;&amp; addTermForm.controls.incentivetype_name.errors" class="text-danger">
                          <div *ngIf="addTermForm.controls.incentivetype_name.errors.required">Please enter incentive type</div>
                          </div>
                         </div>
                    </div> 
                
                    <br>
                    <br>

                  <div class="row ">
                   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">  
                    <label>Status:</label>
                    <span style="padding-left: 10px;"></span> 
                    <input type="checkbox"
                    (change)="statusValueChange($event)" style="margin-left: 10px;" [checked]="termDetails.incentivetype_status=='Y'" > 
                   </div>
                  </div>
                   <!-- (change)="statusValueChange($event)" -->
                      
                  
                    <br>
                
                  
                    <div class="row buttons">
                      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                          <input type="Submit" (click)="updateTerms()" class="savebtn" Value="Save" Style="width: 100px;"/>&nbsp;
                          <input type="button" class="savebtn" [routerLink]="['/incentiveTypes']" Value="Cancel" Style="width: 100px;"/>
                         </div>
                    </div>

                  </div>                 

                  </form>

This is my ts.

As of now, for active records it is showing checked on clicking edit record. When i edit the incentive term text box and save it. Status is by default takking as N eventhough(i don't change it).

Please help me with my code.

export class EditIncentiveTypeComponent implements OnInit {

  addTermForm: FormGroup;
  submitted = false;
  loading = false;
  incentivetype_id: number;
  public globalResponse: any = [];
  termDetails: any = [];
 
  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
    private termSrvc: ApiService
    ) 
    {
      this.route.queryParams.subscribe(params => {
        this.incentivetype_id = params.incentivetype_id;
        console.log(this.incentivetype_id);
   });
   }

  ngOnInit(): void {
    this.termEditForm();
    this.addTermForm = this.formBuilder.group({
      incentivetype_name: ['', [Validators.required]],  
  //    incentivetype_status: []
    });    
   }

   termEditForm(){
    this.termSrvc.getIncentiveTypesById(this.incentivetype_id).subscribe(
      response => {
        this.globalResponse = response;
        this.termDetails = this.globalResponse.response[0];
        console.log(this.termDetails);
      });
  }
  
  updateTerms(): any {
    {
      this.submitted = true;  
      if (this.addTermForm.invalid) {
       return;
      }
    }
    const termUpdate = new incentiveTypesModel(
      this.termDetails.incentivetype_id,
      this.termDetails.incentivetype_name,
      this.incentivetype_status
    );
    this.termSrvc.updateIncentiveTypes(termUpdate).subscribe((res: any) => {
      console.log('res', res);
      if (res.status === 200) {
        alert('Record updated successfully');
        this.router.navigate(['incentiveTypes']);
      }
      else {
        alert('Please check the details');
      }
    });
  }

  incentivetype_status = "";
  statusValueChange(evt) {
    let target = evt.target;
    if (target.checked) {
      this.incentivetype_status = "Y";
    } else {
      this.incentivetype_status = "N";
    }
    console.log(this.addTermForm.value);
  }

Models.ts file is this:

export class incentiveTypesModel {
      constructor(
          public incentivetype_id: number,
          public incentivetype_name: any,
          public incentivetype_status: any
      ){}
    }



Aucun commentaire:

Enregistrer un commentaire