Проблема с полем ввода в FormGroup в ionic / angular - PullRequest
Новая
       62

Проблема с полем ввода в FormGroup в ionic / angular

0 голосов
/ 10 июля 2020

У меня проблема с FormGroup. У меня есть список описаний мест, которые я использую для заполнения формы с соответствующими полями ионного ввода. Пользователь должен иметь возможность обновить описание и отправить его. Но когда я не обновляю значение в полях, данные, отправляемые в файл ts, пусты, даже если они хорошо отображаются на экране. Подскажите пожалуйста, как исправить?

Вот мой html файл: 

<ion-content padding class="form-content" [fullscreen]="true">
    <ion-header collapse="condense">
      <ion-toolbar>
        <ion-title size="large">Debug</ion-title>
      </ion-toolbar>
    </ion-header>
  <form [formGroup]="validations_form"  (ngSubmit)="onSubmit(validations_form.value)">    
    <div *ngFor="let place of (places | async)">
      <ion-item>
        <ion-label color="primary"></ion-label>
        <ion-input type="text" formControlName="desc_{{place.id}}" [value]="place.name"></ion-input>
      </ion-item>
    </div>
    <ion-button expand="full" type="submit">Save</ion-button>
  </form>
</ion-content>

Вот мой ts: 

import { Component} from '@angular/core';
import { Observable } from 'rxjs';
import { Validators, FormBuilder, FormGroup, FormControl, FormArray, ValidationErrors } from '@angular/forms';
import { PersonService } from '../../person.service';
import Place from '../../types';


@Component({
  selector: 'app-debug',
  templateUrl: './debug.page.html',
  styleUrls: ['./debug.page.scss'],
})
export class DebugPage {//} implements OnInit {
  places: Observable<Place[]>;
  validations_form: FormGroup;
  constructor(
    public formBuilder: FormBuilder,
    public personService: PersonService
  ) {
    this.places = personService.getAllPlaces_full(); 
    this.validations_form = this.formBuilder.group({
      'desc_1': ['', Validators.required],
      'desc_2': ['', Validators.required],
      'desc_3': ['', Validators.required],
      'desc_4': ['', Validators.required],
      'desc_5': ['', Validators.required],
      'desc_6': ['', Validators.required]});
   }

onSubmit(values){ 
    console.log(values);
    for (let [key, value] of Object.entries(values)) {
      if (!( value ===null))
      {
        console.log(`${key}: ${value}`);  
      }
    }
  }
}

Вот скрин : экран

Вот журнал: лог в консоли

1 Ответ

0 голосов
/ 10 июля 2020

Модель, которая используется для заполнения вашей формы: validations_form. Это полностью не зависит от наблюдаемых мест, вы должны использовать наблюдаемый объект в качестве модели, а с помощью RX JS вы можете легко прочитать данные из своего наблюдаемого HTML: 

<ion-content padding class="form-content" [fullscreen]="true">
    <ion-header collapse="condense">
      <ion-toolbar>
        <ion-title size="large">Debug</ion-title>
      </ion-toolbar>
    </ion-header>
  <form [formGroup]="places | async as Places"  (ngSubmit)="onSubmit()">    
    <div *ngFor="let place of Places">
      <ion-item>
        <ion-label color="primary"></ion-label>
        <ion-input type="text" formControlName="desc_{{place.id}}" [value]="place.name"></ion-input>
      </ion-item>
    </div>
    <ion-button expand="full" type="submit">Save</ion-button>
  </form>
</ion-content>

ТС: 

onSubmit(){ 

   places.subscribe(res => {
    console.log(res);
    // do something with your data 
    });
  }
...