How to display a value in an input and lock the input?

Question

In a HTML table, I retrieve the value of the SOLDE field.

<div class="container" *ngIf="details">
   <table class="table table-hover table-striped spaceLeft">
      <tbody>
         <tr>
            <th>Solde</th>
            <td>{{details[0].SOLDE}}</td>
         </tr>
      </tbody>
   </table>
</div>

Here is an image

image1

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 class="card-body">
  <form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid ">
    <div class="row row-cols-3 pt-3">
      <div class="col text-end">
        <label for="solde" class="form-label">Solde</label>
      </div>
      <div class="col-4">
        <input
          id="solde"
          name="solde"
          type="text"
          class="form-control"
          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.

Answer 1

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.