My Control is not getting value from Model class Angular 6 TS

Question

I'm passing data to my model class when user click on button. Data is going to model class correctly when I console it so it shows me all fields with values but the issue is my input fields is not getting that values, Fields are empty. Kindly share any solution for it. The value are correct in my console but input fields are not getting them.

HTML

<form #form2="ngForm">
                <div class="row">
                  <input type="hidden" name="ID" #ID="ngModel" [(ngModel)]="objCompanyFinancialDetails.ID"
                    class="form-control" />
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Conversation Date Year</label>
                      <mat-select placeholder="Please Select" name="FDConversationDateYear" class="form-control" #FDConversationDateYear="ngModel"
                      [(ngModel)]="objCompanyFinancialDetails.FDConversationDateYear">
                      <mat-option value="2019">2019</mat-option>
                      <mat-option value="2018">2018</mat-option>
                      <mat-option value="2017">2017</mat-option>
                      <mat-option value="2016">2016</mat-option>
                      <mat-option value="2015">2015</mat-option>
                      <mat-option value="2014">2014</mat-option>
                      <mat-option value="2013">2013</mat-option>
                      <mat-option value="2012">2012</mat-option>
                      <mat-option value="2011">2011</mat-option>
                      <mat-option value="2010">2010</mat-option>
                      <mat-option value="2009">2009</mat-option>
                      <mat-option value="2008">2008</mat-option>
                      <mat-option value="2007">2007</mat-option>
                      <mat-option value="2006">2006</mat-option>
                      <mat-option value="2005">2005</mat-option>
                      <mat-option value="2004">2004</mat-option>
                      <mat-option value="2003">2003</mat-option>
                      <mat-option value="2002">2002</mat-option>
                    </mat-select>
                      <!-- <input name="FDConversationDateYear" class="form-control" #FDConversationDateYear="ngModel"
                        [(ngModel)]="objCompanyFinancialDetails.FDConversationDateYear" />
                      <div class="validation-error" *ngIf="FDConversationDateYear.invalid && FDConversationDateYear.touched">This field is required.</div>  -->

                      <!-- <div class="datepicker-cover">
                      <input class="form-control"  [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date" required>
                        <mat-datepicker-toggle class="datepicker-toggler" matSuffix [for]="dp"></mat-datepicker-toggle>
                        <mat-datepicker #dp
                                        startView="multi-year"
                                        (yearSelected)="chosenYearHandler($event, dp)"
                                        panelClass="example-month-picker">
                        </mat-datepicker>
                      </div> -->
                      <!-- K<div class="validation-error" *ngIf="FDConversationDateYear.invalid && FDConversationDateYear.touched">This field is required.</div>  -->
                    </div>
                  </div> 

                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Conversion Date Month</label>
                      <mat-select placeholder="Please Select" name="FD_Conversion_Date_Month" class="form-control" #FD_Conversion_Date_Month="ngModel"
                      [(ngModel)]="objCompanyFinancialDetails.FD_Conversion_Date_Month">
                      <mat-option value="1">January</mat-option>
                      <mat-option value="2">Febuary</mat-option>
                      <mat-option value="3">March</mat-option>
                      <mat-option value="4">April</mat-option>
                      <mat-option value="5">May</mat-option>
                      <mat-option value="6">June</mat-option>
                      <mat-option value="7">July</mat-option>
                      <mat-option value="8">August</mat-option>
                      <mat-option value="9">September</mat-option>
                      <mat-option value="10">October</mat-option>
                      <mat-option value="11">November</mat-option>
                      <mat-option value="12">December</mat-option>
                    </mat-select>
                      <!-- <input name="FD_Conversion_Date_Month" class="form-control" #FD_Conversion_Date_Month="ngModel"
                        [(ngModel)]="objCompanyFinancialDetails.FD_Conversion_Date_Month" /> -->

                       <!-- <div class="validation-error" *ngIf="FD_Conversion_Date_Month.invalid && FD_Conversion_Date_Month.touched">This field is required.</div>  -->
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Financials Year End Date</label>
                        <div class="datepicker-cover">
                          <input name="FD_Financials_year_end_date" #FD_Financials_year_end_date="ngModel"
                        [(ngModel)]="objCompanyFinancialDetails.FD_Financials_year_end_date" class="form-control"
                        required [matDatepicker]="picker2"/>
                            <mat-datepicker-toggle class="datepicker-toggler" [for]="picker2"></mat-datepicker-toggle>
                            <mat-datepicker #picker2></mat-datepicker>
                          </div>
                      <!-- <div class="validation-error" *ngIf="FD_Financials_year_end_date.invalid && FD_Financials_year_end_date.touched">This field is required.</div> -->
                    </div>
                  </div>
</form>

Component.ts //Method for getting ID onclick

updateFinancialDetailsbyCompID(CompanyID: number){
    this.companyFinancialDetailsService.GetAllbyCompID(CompanyID).subscribe(res => {
      this.objCompanyFinancialDetails = res;
      console.log(this.objCompanyFinancialDetails);
    });;
  }

onclick method

populateItem(element) {
    this.updateFinancialDetailsbyCompID(element.ID);
  }

Answer 1

This in callback functions is not necessarily the same. try

updateFinancialDetailsbyCompID(CompanyID: number){
  let self = this;
  self.companyFinancialDetailsService.GetAllbyCompID(CompanyID).subscribe(
    res => {
      self.objCompanyFinancialDetails = res;
      console.log(self.objCompanyFinancialDetails);
    }
  );
}

Answer 2

You can use FormGroup via FormBuilder. for an example;

testForm: FormGroup;

constructor(private _formBuilder: FormBuilder, private _demoService: DemoService) {

    this.testForm = this.createForm();

}

private createForm(): FormGroup { 
     return this._formBuilder.group({
           Name: [null, Validators.required],
           Lastname: [null, Validators.requider]
     });
}

updateForm(): void {

      this._demoService.getFormValues().subscribe((response) => {

           this.testForm.controls['Name'].setValue(response.Name);
           this.testForm.controls['Lastname'].setValue(response.Lastname);

      });

}

here is html template;

<form name="testForm"   [formGroup]="testForm">

    <mat-form-field>
            <mat-label>Name</mat-label>
            <input  type="text"
                    matInput
            formControlName="Name">
    </mat-form-field>

    <mat-form-field>
            <mat-label>Lastname</mat-label>
            <input  type="text"
                    matInput
            formControlName="Lastname">
    </mat-form-field>

</form>