获取“无法读取未定义的属性'geocodingForm'”

时间:2019-09-09 03:39:50

标签: angular typescript

我正在使用Angular Material的反应形式。我正在尝试删除提到的错误。我可以在使用console.log提交时获取输入的值,但是当我尝试将值放在onSubmit方法下的变量“ address”中时,仍然出现错误。

我已经尝试了以下方法:

  • var address = this.geocodingForm.get('input')。value
  • var address = this.geocodingForm.value.input

以及将var更改为let。

geocoding.component.html

python3 --version //to check which version of python3 is installed on your computer
python2 --version // to check which version of python2 is installed on your computer
python --version // it shows your default Python installed version.

geocoding.component.ts

    <mat-grid-tile colspan='60'>
        <div #gmap class="map"></div>
    </mat-grid-tile>

    <mat-grid-tile colspan='40'>
    <form novalidate [formGroup]="geocodingForm" #gform="ngForm" (ngSubmit)="onSubmit()">
      <h4>Geocoding Service</h4>
      <p>
        <input matInput formControlName="input" placeholder="address" type="text" required>
        <mat-error *ngIf="formErrors.input">{{formErrors.input}}</mat-error>
      </p>
      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="gform.form.invalid">Submit</button>
    </form>

    </mat-grid-tile>
</mat-grid-list>

我只是希望不会收到错误消息:

  

无法读取未定义的属性“ geocodingForm”

1 个答案:

答案 0 :(得分:0)

这是因为您使用的是传统的function,其中this的值取决于函数的调用方式。

使用箭头功能代替

geocodeAddress(geocoder, resultsMap){}

&删除嵌套关键字function

如果您可以删除嵌套的function并在组件类中创建单独的函数,那就更好了