jeudi 10 décembre 2020

My checkbox value is not getting unchecked on click while retrieving data from service using API and ngModel

This is my code.. On edit page, i'm retrieving data from service using ngModel. I want to change status checkbox value to "N" by unchecking the checkbox. On clicking the checkbox value N is reflected in console. But, checkbox is not getting unchecked. it is remaining checked only. I want it to be toggled onclickk just like it's value (checked if "Y" and unchecked if "N").

HTML FILE

 <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">Term:</label>
                              <input type="text" class="form-control" placeholder="Enter rule"
                              formControlName="RuleName" 
                              [(ngModel)]="termDetails.RuleName" [ngClass]="{ 'is-invalid': submitted &amp;&amp; addTermForm.controls.RuleName.errors }">   
                    
                              <div *ngIf="submitted &amp;&amp; addTermForm.controls.RuleName.errors" class="text-danger">
                                <div *ngIf="addTermForm.controls.RuleName.errors.required">Please enter term</div>
                                <div *ngIf="addTermForm.controls.RuleName.errors.pattern">Enter only characters</div>
  
                                </div>
                             </div>
                        </div> 
                    
                        <br>
                    
                         <div class="row " style="display: none;">
                          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <label for="id">Dealer Id:</label>
                            <input type="text" class="form-control" placeholder="Enter Id"
                            formControlName="Dealer_Id" [(ngModel)]="termDetails.Dealer_Id" [ngClass]="{ 'is-invalid': submitted &amp;&amp; addTermForm.controls.Dealer_Id.errors }">   
                    
                            <div *ngIf="submitted &amp;&amp; addTermForm.controls.Dealer_Id.errors" class="text-danger">
                            <div *ngIf="addTermForm.controls.Dealer_Id.errors.required">
                              Dealer Id is required
                            </div>
                            <div *ngIf="addTermForm.controls.Dealer_Id.errors.pattern">
                              Dealer Id must be Number
                            </div>
                          </div>
                            </div>
                           </div> 
                      </div> 
                    
                      <br>
                      
                        <div class="row " style="display: none;">   
                          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <span style="padding-left: 15px;"></span>
                            <label for="type">Term Type:</label>
                            <div>
                              <span style="padding-left: 15px;"></span>
                            <input class="form-check-input"  type="radio" value="S"  name="Type" formControlName="Type"  [(ngModel)]="termDetails.Type" style="margin-left: 10px;" >
                            <label style="padding-left: 30px;">System Defined</label>     
                    
                            <span style="padding-left: 30px;"></span>
                            <input class="form-check-input" type="radio" value="U" name="Type" formControlName="Type"  [(ngModel)]="termDetails.Type">
                            <label> User Defined </label>
                            </div>
                    </div>
                  </div>    
                    
                       <br>                    
                       
                       
                       <div class="col-sm-12">  
                        <label style="padding-left: 6px;">Status:</label>
                        <span style="padding-left: 10px;"></span>  
                        <input type="checkbox" formControlName="Status"
           (change)="statusValueChange($event)" style="margin-left: 10px;" [(ngModel)]="termDetails.Status"
          [ngClass]="{'is-invalid': submitted && addTermForm.get('Status').errors}">                        
                    

                     </div>
                          
                      
                        <br>
                    
                      
                          <div class="row " style="margin-left: 10px;">
                            <div class="col-sm-12">
                              <input type="Submit" (click)="updateTerms()" class="savebtn" Value="Save" Style="width: 100px;"/>&nbsp;
                              <input type="button" class="savebtn" [routerLink]="['/incentiveTerms']" Value="Cancel" Style="width: 100px;"/>
                             </div>
                        </div>
                        
                      </form>

TS FILE

 
 export class EditSystemDefinedComponent implements OnInit {

  addTermForm: FormGroup;
  submitted = false;
  loading = false;
  Id: number;
  public globalResponse: any = [];
  termDetails: any = [];

  // public editTerm: any = [];
 
  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
    private termSrvc: ApiService
    ) 
    {
      this.route.queryParams.subscribe(params => {
        this.Id = params.Id;
        console.log(this.Id);
   });
   }

  ngOnInit(): void {
    this.termEditForm();
    this.addTermForm = this.formBuilder.group({
      RuleName: ['', [Validators.required, Validators.pattern('[a-zA-Z# ]*')]],
     // Dealer_Id: ['', [Validators.required, Validators.pattern('[0-9]*')]],
      Type:  ['', [Validators.required]],
      Status:  [],
    });
   }

   termEditForm(){
    this.termSrvc.getIncentiveTermsById(this.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 incentiveTermsModel(
      this.termDetails.Id,
      this.termDetails.RuleName,
       this.termDetails.Dealer_Id,
       this.termDetails.Type,
       this.termDetails.Status
    );
    this.termSrvc.updateIncentiveTerms(termUpdate).subscribe((res: any) => {
      console.log('res', res);
      if (res.status === 200) {
        alert('Record updated successfully');
        this.router.navigate(['incentiveTerms']);
      }
      else {
        alert('Please check the details');
      }
    });
  }

  statusValueChange($event: any) {
    this.addTermForm.controls['Status'].setValue($event.target.checked ? 'Y' : 'N');
    console.log('form values:', this.addTermForm.value);
  }



Aucun commentaire:

Enregistrer un commentaire