vendredi 11 décembre 2020

On editing and retrieving a record in angular my checkbox is showing checked only for both Y and N

This is my html. I'm retriving data using ng model. Suppose if i have record with checkbox value N. on clicking edit record, it should show empty checkbox right ?? but as per my code the checkbox showing checked constantly for both Y and N records.


<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"> 
                     </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>



This is my ts file for retriving data from service. Please help me with the checkbox. It should show unchecked for a record that is having value as N. as of now it is showing values as checked for both Y and N records. is there a issue with ngmodel and checkbox ?? because when i use the same for radio buttons it is working well.



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);
      });
  }


  
 
  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