表单控件的值为空字符串答案

【问题标题】：the value of the form controls is empty string表单控件的值为空字符串
【发布时间】：2021-06-15 07:50:13
【问题描述】：

我没有在 .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 代码读取 startdate 和 end date 的值如下：

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 浏览器中运行代码时，开始日期和结束日期的值总是空字符串。此外，与这些控件关联的日历未显示任何日期。它完全空白。下图是：

任何帮助将不胜感激。

【问题讨论】：

您是否检查过控制台是否有任何其他错误？

标签： angular typescript

【解决方案1】：

在开发系统时，您总会遇到这样的问题。所以你需要找到一种方法来解决获得报酬，这样你就可以看到你有错误的正确部分。所以使用一些版本控制来保存你的代码，并且不用担心攻击它。解决这个问题的方法是只留下最重要的部分并使其尽可能简单，如果您需要示例和示例，如果您搜索您可能会找到。请记住始终在构建某些东西时测试您的逻辑，因为它是通过构建来实现的。

如果你需要更多的学习，你可以在这个文档Material form fields documentation找到一些东西

似乎是一个没有帮助的答案，但如果你明白这一点，这些知识可以回答这个问题，但在代码道路上很多。

尝试查看所有控制台试图告诉你的信息，这意味着 IDE 和 WEB 控制台。

【讨论】：