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 && 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"
[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;"/>
<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