значение элементов управления формы - пустая строка

Question

Я не получаю значение моего элемента управления формой в файле .ts. Значение всегда равно нулю. Форма очень проста. У меня есть два из контрольной даты начала и окончания. Я пытаюсь получить значение начальной и конечной даты в моем внутреннем файле .ts. Календарь, связанный с этим элементом управления, появляется, но не отображает даты в календаре. Календарь полностью пуст. Ниже мой html код:

<div class="headerDiv">
  <div class="headerTopBanner"></div>
  <div class="headerLogo">
      <div class="logo"></div>
  </div>
  <div class="headerBottomBanner">

  </div>
</div>
<div class="maxContent">
  <div *ngIf="!Loaded">
    <i class="loadingIconSearch fa fa-refresh fa-spin fa-4x fa-fw"></i> <span class="loadingIconSubSection">Loading</span>
  </div>
  <div *ngIf="Loaded" >
    <form id="RecProject">
      <fieldset>
    <div class="row"  >
      <div class="col-md-2">
        <mat-form-field >
          <input formControlName="startDate" matInput [matDatepicker]="picker" placeholder="Start Date">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
          <mat-error >Start date is Required</mat-error>
        </mat-form-field>
      </div>
      <div class="col-md-2">
        <mat-form-field>
          <input formControlName="endDate" matInput [matDatepicker]="endpicker" placeholder="End Date">
          <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
          <mat-datepicker #endpicker></mat-datepicker>
          <mat-error >End date is Required</mat-error>

        </mat-form-field>
      </div>
      <div class="col-md-2">
        <mat-form-field (keydown.enter)="$event.preventDefault()" >
          <input matInput placeholder="Total Records" formControlName="totalRecords">
        </mat-form-field>
      </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="row margintop10">
        <div class="col-md-12">
        <mat-form-field (keydown.enter)="$event.preventDefault()" class="fullWidth">
          <input matInput placeholder="DB Name" formControlName="DBName">
        </mat-form-field>


</div>
    </div>
  </div>
</div>
<div class="row">
<div class="col-md-5 inputMargin">
  <button class="appBtn lineButton" (click) = "LoadData()" >
    Start Loading
    <span><i class="fa fa-map-marker"></i></span>
  </button>
</div>
</div>


      </fieldset>
    </form>
  </div>

Мой .ts код для чтения значений начальной и конечной даты приведен ниже:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import {RecLoadService} from '../shared/RecLoad.service';
import {RecLoadDataTypeModel} from '../Models/RecLoadData.model';

@Component({
  selector: 'app-Recload',
  templateUrl: './Recload.component.html',
  styleUrls: ['./Recload.component.css']
})
export class RecloadComponent implements OnInit {
  public Loaded = true;
  DataUploaded = false;
  message = null;
  public RecLoadData:RecLoadDataTypeModel=null;


public startDate = new FormControl('', Validators.required);
public endDate = new FormControl('' , Validators.required);
  constructor(public service: RecLoadService) { }

   ngOnInit() {
  }




  LoadData() {
     if (!this.startDate.hasError('required') && !this.endDate.hasError('required')) {
            this.RecLoadData.startDate  = this.startDate.value;
            this.RecLoadData.endDate = this.endDate.value;
           this.service.UploadRecLoadData(this.RecLoadData).subscribe(() => {
              this.DataUploaded =true;
              this.message = 'Data uploaded Successfully';

           });



       }
 }


    }

Когда я запускаю код в chrome браузер, значение даты начала и окончания всегда пустые строки. Кроме того, календарь, связанный с этими элементами управления, не показывает какие-либо даты. Это абсолютно пусто. Ниже изображение:

любая помощь будет высоко оценена.

Answer 1

При разработке систем у вас всегда будут такие проблемы. Таким образом, вам нужно найти способ решить, чтобы получить оплату, чтобы вы могли видеть правильную часть, что у вас есть ошибки. поэтому используйте некоторые версии для сохранения своего кода и go, не боясь атаковать его. Способ решить эту проблему - оставить только ту часть, которая имеет значение, и упростить ее, насколько это возможно, если вам нужны примеры и примеры, если вы ищете, то можете найти. Не забывайте всегда go проверять свою логику c просто на сборке чего-либо, потому что это сборка.

Если вам нужно больше опираться, вы можете найти что-то в этой документации Документация полей формы материала

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

Попробуйте увидеть, что все консоли пытаются вам сказать, это означает IDE и веб-консоль.