How can I stop input text from writing in 2 inputs? - html

Question

I have a problem in input text, when I write in one input it changes in the other input as well ! how can I fix that
here is it my code:
<mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled style=" background:#F2EDFF;" *ngFor="let i of listSousCategorie" >
<div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center" >
<div style="padding-left:1em" fxFlex="grow" >{{i.libelle}} {{i.id}}</div>
<mat-form-field>
<form [formGroup]="form" (ngSubmit)="onSubmit(i.id)">
<mat-label>Note</mat-label>
<input type="text" matInput formControlName="Note" [(ngModel)]="Note" >
</form>
</mat-form-field>
</div>
</mat-expansion-panel>
TS File:
Note:string;
ngOnInit() {
this.form = this.formBuilder.group({
Note: [''],
});
}
onSubmit(id:number) {
let obj = this.form.value;
obj.Note = this.Note;
console.log(this.Note);
this.LExamenSousCategorieService
.updateSouCategorie(obj,id)
.then(res => {});
}

Answer 1

<mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled style=" background:#F2EDFF;" *ngFor="let i of listSousCategorie" >
<div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center" >
<div style="padding-left:1em" fxFlex="grow" >{{i.libelle}} {{i.id}}</div>
<mat-form-field>
<mat-label>Note</mat-label>
<input type="text" matInput [(ngModel)]="i.Note">
</mat-form-field>
<button type="button" (click)="onSubmit(i.id)">
</div>
</mat-expansion-panel>
ts
// All commented lines are not needed
// Note:string;
// ngOnInit() {
// this.form = this.formBuilder.group({
// Note: [''],
// });
// }
onSubmit(id:number) {
// let obj = this.form.value;
// obj.Note = this.Note;
console.log(this.listSousCategorie);
this.LExamenSousCategorieService
.updateSouCategorie(i.Note,id)
.then(res => {});
}
This is still not the best solution for you, but solves your problem. A better solution would require an extend refactoring.