Question

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)
}

Answer 1

尝试一下：-

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)
     }

Answer 2

您不能将类似save方法中的键动态地注入有效负载。请遵循此代码。

payload: any;

save(){
   this.payload = {
      area: this.operatorForm.get('area').value,
      flightDateTimeStr: this.operatorForm.get('date').value,
   } 
}

如果要投射对象，则导出接口并像这样对对象的属性进行类型转换。

export interface PayLoad {
   area: any;
   flightDateTimeStr: any;
}

payload: PayLoad;

core.js：6237错误TypeError：无法设置未定义的属性“区域”

2 个答案: