I am encountering an issue in my .ts file where I cannot retrieve the value of my form control; it is always null. The form consists of two simple controls: Start Date and End Date. I am attempting to extract the values of these dates in my backend .ts file. Despite the calendar associated with these controls popping up, it fails to display any dates. The calendar remains blank. Below is the snippet of my HTML code:
<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>
My .ts code for fetching the values of start date and end date is as follows:
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';
});
}
}
}
Upon running the code in Chrome browser, the start date and end date values persist as empty strings. Furthermore, the calendar associated with these controls displays no dates, remaining entirely blank. Please see the image below:
https://i.sstatic.net/Mf0n3.png
Any assistance on this matter would be greatly appreciated.