Данные не отправляются в FormGroup - Angular - PullRequest
Новая
       48

Данные не отправляются в FormGroup - Angular

1 голос
/ 06 июля 2019

У меня есть форма одного поля, и данные не отправляются на мой 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>

Я знаю, что вы можете использовать #address в HTML и передать его методу getAddress(), но я хочу сделать это так, потому что я собираюсь использовать сообщения об ошибках для обратной связи с пользователем.

Ожидается :

Я хочу, чтобы адрес был проверен по мере необходимости и использовался в геокодере.

Фактический :

FormGroup пусто и всегда недействительно (независимо от того, что вы вводите), и поэтому не может использоваться в геокодере.

Ответы [ 2 ]

2 голосов
/ 06 июля 2019

Вам нужно добавить formControlName

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

Цитата из Шаг 2: Связывание модели FormGroup и представления :

Обратите внимание, что так же, как группа форм содержит группу элементов управления, форма FormGroup профиля связана с элементом формы с помощью директивы FormGroup, создавая коммуникационный уровень между моделью и формой, содержащей входные данные. Входные данные formControlName, предоставляемые директивой FormControlName, связывают каждый отдельный вход с элементом управления формы, определенным в FormGroup. Элементы управления связываются с соответствующими элементами.

0 голосов
/ 06 июля 2019

Вам не хватает атрибута 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>
...