HTML: I have created a form but encounter an error when clicking the submit button. Can someone please assist me in identifying the issue?
<h3 class="page-header">Operator Form</h3>
<div class="outer-container">
<form class="form-section" [formGroup]="operatorForm" (ngSubmit)="save()">
<!-- <mat-form-field>
<input matInput type="text" placeholder="Drone Type" formControlName="drone_type" required>
</mat-form-field> -->
<mat-form-field>
<input matInput type="text" placeholder="Police Station" formControlName="police" readonly>
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Area" formControlName="area" required>
</mat-form-field>
<!-- <mat-form-field>
<mat-label>Date and Time</mat-label>
<input matInput [matDatepicker]="picker" formControlName="date" readonly/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker disabled="false"></mat-datepicker>
</mat-form-field> -->
<mat-form-field>
<input matInput [ngxMatDatetimePicker]="picker" placeholder="Date and Time"
formControlName="date"
[disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
[touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian">
</ngx-mat-datetime-picker>
</mat-form-field>
<div style="text-align: right">
<button mat-raised-button type="submit" [disabled]="operatorForm.invalid" >Submit</button>
</div>
</form>
</div>
<div class="spinner" [style.display]="showSpinner ? 'flex' : 'none'">
<mat-spinner [diameter]="30" ></mat-spinner>
</div>
component.ts:(I am facing an issue with my form upon clicking the submit button. Could you please help me in resolving this? )
payload: any;
ngOnInit(){
this.operatorForm = new FormGroup({
'police': new FormControl(null, Validators.required),
'area': new FormControl(null, Validators.required),
'date': new FormControl(null, Validators.required),
})
}
save() {
this.payload.area = this.operatorForm.get('area').value
this.payload.flightDateTimeStr = this.operatorForm.get('date').value,
console.log(this.payload)
}