无法设置未定义的属性“位置”

Question

我有一个添加表单，用于获取输入位置和其他数据。 在 service.ts 中，我声明了

export class SBOrderViewModel {
location: string;
agent: string;
} 

在 add.component.ts

中

sboVM: SBOrderViewModel;
this.addForm = this.formBuilder.group({
      location: [],
      agent: [],
       });

无论何时从前端提交数据，它都会转到 add.componet.ts

中的onSubmit（）函数。

onSubmit() {

    this.sboVM.location = this.addForm.value.location;
    this.sboVM.agent = this.addForm.value.agent;
    this.sboService.Insert(this.sboVM).subscribe(
      data => {
        this.router.navigate(['/sborder/']);
      },
      this.errHandler.bind(this)
    );
  } 

在add.componet.html

中

 <form #addorder [formGroup]="addForm" clrForm clrLayout="horizontal">
            <clr-input-container>
            <label>Location</label>
            <input class="txtboxwidth" formControlName="location" clrInput type="text" name="location"/>
          </clr-input-container>
    <button class="mrgnlft btn btn-success" [disabled]='addForm.invalid' *ngIf="btnvisibility" type="submit" (click)="onSubmit()">Save</button>
     </form>

当我在addform中添加值并提交时，我无法弄清为什么它显示无法设置未定义的属性“位置”。非常感谢您的帮助

Answer 1

在onSubmit函数中，类似于 this.sboVM 的值为null。

除了您的代码有效以外，bcs

Answer 2

您必须初始化变量this.sboVM

在构造函数中添加：this.sboVM = new SBOrderViewModel();

Answer 3

您可以通过更新以下add.component.ts中的代码进行检查

this.addForm = new FormGroup({
      location: new FormControl(null, [])
      agent: new FormControl(null, [])
     });