数据未发送到 FormGroup - Angular

Question

我有一个单字段表单，数据没有发送到我的FormGroup。当我出于某种奇怪的原因记录它时它是空的。

我的 TS 文件

  addressData: FormGroup;
  submitted = false;
  success = false;

  userLat: number;
  userLng: number;

  private geoCoder: google.maps.Geocoder;

  constructor(private maps: MapsAPILoader, private bulider: FormBuilder, private ref: ChangeDetectorRef) { }

  ngOnInit() {
    this.addressData = this.bulider.group({
      address: ["", Validators.required],
    });
    console.log("Init data: " + this.addressData.controls['address'].value);

    this.maps.load().then(() => {
      this.geoCoder = new google.maps.Geocoder();
    });
  }

  getAddress() {    
    this.submitted = true;

    // I commented this out to see if the geocoder works
    // if (this.addressData.invalid) {
    //   console.error("Invalid address! Address: " + this.addressData.value);
    //   return;
    // }

    this.geoCoder.geocode({ 'address': this.addressData.controls['address'].value }, (results, status) => {
      if (status === google.maps.GeocoderStatus.OK) {
        this.userLat = results[0].geometry.location.lat();
        this.userLng = results[0].geometry.location.lng();
        this.ref.detectChanges();
        this.success = true;
      } else {
        // The address is empty, therefore gives me invalid_request
        alert('Geocode was not successful for the following reason: ' + status + " and Address: " + this.addressData.controls['address'].value);
      }
    });
    this.submitted = false;
  }
}

HTML

<div>
    <form [formGroup]="addressData" (ngSubmit)="getAddress()">
      <input class="addressBar" type="text" placeholder="Address" maxlength="30" autofocus>
      <br><br><button class="searchBtn" type="submit">Search</button>
    </form>
  </div>

我知道您可以在 HTML 中使用 #address，并将其传递给方法 getAddress()，但我想这样做，因为我将使用错误消息来提供用户反馈。

预期：

我希望根据需要验证地址并在地理编码器中使用。

实际：

FormGroup 为空且始终无效（无论您输入什么内容），因此无法在地理编码器中使用。

Answer 1

您需要添加formControlName

  <input type="text" formControlName="address">

引用Step 2: Associating the FormGroup model and view:

请注意，正如表单组包含一组控件一样，配置文件表单 FormGroup 使用 FormGroup 指令绑定到表单元素，从而在模型和包含输入的表单之间创建通信层。 FormControlName 指令提供的 formControlName 输入将每个单独的输入绑定到 FormGroup 中定义的表单控件。表单控件与其各自的元素进行通信。

Answer 2

您在 Input 中缺少 formControl 属性

<div>
    <form [formGroup]="addressData" (ngSubmit)="getAddress()">
      <input class="addressBar"  [formControl]=addressData.controls.address type="text" placeholder="Address" maxlength="30" autofocus>
      <br><br><button class="searchBtn" type="submit">Search</button>
    </form>
  </div>