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 && addTermForm.controls.RuleName.errors }">
<div *ngIf="submitted && 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 && addTermForm.controls.Dealer_Id.errors }">
<div *ngIf="submitted && 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;"/>
<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