angular - core.js:6237 错误类型错误:无法设置未定义的属性“区域”
问题描述
HTML:这是我的表单。当我单击提交按钮时,出现此错误。我不知道我哪里错了。你能帮忙吗?
<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:(这是我的表单..当我点击提交按钮时出现此错误。不知道我哪里出错了..你能帮忙吗?)
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)
}
解决方案
尝试这个 :-
payload ={};
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)
}