Мой элемент управления не получает значения от класса модели Angular 6 TS

Question

Я передаю данные своему классу модели, когда пользователь нажимает кнопку.Данные собираются правильно моделировать класс, когда я его консолью, поэтому он показывает мне все поля со значениями, но проблема в том, что мои поля ввода не получают эти значения, поля пусты.Пожалуйста, поделитесь любым решением для этого.В моей консоли указано правильное значение, но поля ввода не получают их.

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

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

Answer 1

Вы можете использовать FormGroup через FormBuilder.для примера;

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);

      });

}

вот шаблон HTML;

<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>

Answer 2

Это в функциях обратного вызова не обязательно совпадает.попробуйте

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