In a HTML table, I retrieve the value of the SOLDE
field.
<div *ngIf="details">
<table >
<tbody>
<tr>
<th>Solde</th>
<td>{{details[0].SOLDE}}</td>
</tr>
</tbody>
</table>
</div>
Here is an image
Except that, I have to retrieve the value of the solde in an input and lock the input.
I tried to create a form and add the variable SOLDE
to retrieve the value, but it doesn't work unfortunately.
<div >
<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid ">
<div >
<div >
<label for="solde" >Solde</label>
</div>
<div >
<input
id="solde"
name="solde"
type="text"
style="min-width: 380px"
maxlength="25"
[(ngModel)]="details[0].SOLDE"
/>
</div>
</div>
</form>
</div>
I get an error message:
Error TS2532: Object is possibly 'undefined'.
I think the problem is here --> [(ngModel)]="details[0].SOLDE
?
How do I retrieve the value from the input, please?
For now, the component.ts file is like this:
export class InternalTransfertWatchComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject<void>();
details?: AdvTitres[] = [];
svm: string | null = null;
constructor(
private service: InternalTransfertWatchService,
private activatedRoute: ActivatedRoute,
private location: Location,
) { }
ngOnInit(): void {
this.svm = this.activatedRoute.snapshot.paramMap.get('svm');
if (!this.svm) {
this.goBack();
return;
}
this.getDetails();
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
private getDetails(): void {
this.service.getTransfert(this.svm!).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.details = res.TRANS;
}
});
}
goBack(): void {
this.location.back();
}
}
Thanks for your help.
CodePudding user response:
For your error, you can just use this
[(ngModel)]="details[0]!.SOLDE"
To lock the input, add the disabled
attribute to it.
Now, as a personal opinion, if you display an input that is always disabled, you don't need an input, a text field is just fine.