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指令绑定到form元素，从而在模型和包含输入的表单之间创建通信层。 FormControlName指令提供的formControlName输入将每个单独的输入绑定到FormGroup中定义的表单控件。表单控件与它们各自的元素进行通信。

Answer 2

您在Input中缺少formControl属性

COUNTY

数据未发送到FormGroup-Angular

2 个答案: