problem with assigning data correctly to formular with ngModel

Question

I'm trying to assign the retrieved data to a form. The data is correctly retrieved, but when I attempt to pass each value of the data to its corresponding input or select, it doesn't place them correctly. Interestingly, when I display each value before the input, the value appears correct. here is my class object :

export class ConfigGeneral {
    idConfigGeneral?: number;
    libelleInterneCabinet?: string;
    devise?: string;
}

this is the typescript component

import { Component, OnInit } from '@angular/core';
import { NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { ConfigGeneral } from 'src/app/models/cabinet/configCabinet/ConfigGeneral';
import {ConfigGeneralService} from '../../../Services/cabinet/configuration/config-general.service';
import { map, tap } from 'rxjs';
import { ToastrService } from 'ngx-toastr';



@Component({
  selector: 'app-parametre-general',
  templateUrl: './parametre-general.component.html',
  styleUrls: ['./parametre-general.component.scss']
})
export class ParametreGeneralComponent implements OnInit {
  configGeneral : ConfigGeneral 

  constructor(private modalService: NgbModal,
    private configGeneralService:ConfigGeneralService) { 
      this.configGeneral  = new ConfigGeneral()
    }
  
  ngOnInit(): void {

    this.getConfigurationGeneral()
  }

getConfigurationGeneral(){
    this.configGeneralService.getConfigGeneralOfCabinet().pipe
      (tap((data)=>{
        if (data != null){
          console.log(data)
          this.configGeneral=data;  
          console.log(this.configGeneral)
        }
        })
      ).subscribe();
  }
}

and here is the form of the html component (I will focus on only two values "libelleInterneCabinet" and "devise" to make it clear and readable)

                  <form >
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label" for="libelleInterne">Libelle interne du cabinet</label>
                        <div class="col-sm-7">
                          {{configGeneral.libelleInterneCabinet}}
                          <input class="form-control" id="libelleInterne" type="text" [(ngModel)]="configGeneral.libelleInterneCabinet">
                      </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label" for="devise">Devise</label>
                        <div class="col-sm-7">
                          {{configGeneral.devise}}
                                <select class="form-select" id="devise" [(ngModel)]="this.configGeneral.devise">
                                    <option value="Euro">Euro</option>
                                </select>
                        </div>
                    </div>
                  </form>

and here's the result of the two console.logs in getConfigurationGeneral() methode :

devise: "Euro"
libelleInterneCabinet: "cabinet"

this is how it is displayed in the figure

screen shot of the interface

actually, I haven't tried anything yet because I can't identify the problem in my code. I hope I can find an answer. Thank you for your time.

Answer 1

I pasted your code into this StackBlitz and saw the following error:

Error: NG01352: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Do you see this error on your end?

The problem is resolved by simply using the name attribute instead of the id attribute:

<input type="text" name="libelleInterne" [(ngModel)]="configGeneral.libelleInterneCabinet" />

Here's the updated StackBlitz