Ионные формы обновляются при сохранении - PullRequest
Новая
       11

Ионные формы обновляются при сохранении

0 голосов
/ 24 сентября 2019

Я пытаюсь создать простую форму, которая сохраняет в firestore каждый раз, когда вносятся изменения.Когда я делаю изменение, форма продолжает мигать, и данные не сохраняются.Я использую похожую концепцию на разных страницах приложения, и все они, кажется, работают

details.page.ts 

  constructor(
    private firestoreService: FirestoreService,
    private route: ActivatedRoute, private alertController: AlertController,
    private router: Router,
    formBuilder: FormBuilder, public firestore: AngularFirestore,
  ) {
    this.inspectionDetailsForm = formBuilder.group({
      Date: [''],
      InspectionType: [''],
      Status: [''],
      ProjectManager: [''],
      Inspector: [''],
      ReportWriter: [''],
    });

  }

  updateInspection(data: any) {
    return this.firestore.collection('inspectionList').doc(this.inspectionID)
      .update(data);
  }

  saveInspectionChanges() {
    if (this.inspectionDetailsForm.status !== 'VALID') {
      console.log('form is not valid, cannot save to database');
      return;
    }

    const data = this.inspectionDetailsForm.value;
    this.updateInspection(data);
  }

ngOnInit() {
    const inspectionID: string = this.route.snapshot.paramMap.get('id');
    this.inspection = this.firestoreService.getInspectionDetail(inspectionID).valueChanges();

    this.firestoreService.getInspectionDetail(inspectionID).valueChanges().subscribe(inspection => {
      this.Inspection = inspection;
      this.Customer = this.firestoreService.getCustomerDetail(this.Inspection.sCustomer).valueChanges();
      this.Site = this.firestoreService.getSiteDetail(this.Inspection.sCustomer, this.Inspection.sSite).valueChanges();
      this.Tank = this.firestoreService.getTankDetail(this.Inspection.sCustomer, this.Inspection.sSite,
                                                      this.Inspection.sTank).valueChanges();
      });

    this.firestoreService.getUserList().valueChanges().subscribe(users => {
        this.Users = users;
    });

    this.inspection.subscribe(inspection => {
      this.inspectionDetailsForm.patchValue(inspection);
    });
  }

details.page.html 

  <form [formGroup]="inspectionDetailsForm" novalidate>
    <ion-list lines="full" class="ion-no-margin ion-no-padding">
        <ion-item>
          <ion-label position="stacked">Date</ion-label>
          <ion-datetime displayFormat="MMMM-DD-YYYY" placeholder="Select Date" formControlName="Date"
            (ionChange)="saveInspectionChanges()"></ion-datetime>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Inspection Type</ion-label>
          <ion-select formControlName="InspectionType" okText="OK" cancelText="Dismiss" (ionChange)="saveInspectionChanges()">
            <ion-select-option value="API 653 Internal">API 653 Internal</ion-select-option>
            <ion-select-option value="API 653 External">API 653 External</ion-select-option>
            <ion-select-option value="STI-SP001">STI SP-001</ion-select-option>
          </ion-select>
        </ion-item>

... форма продолжается

1 Ответ

0 голосов
/ 24 сентября 2019

Ваш файл файла details.page.ts неверный.Помните, что для использования реактивных форм вам следует импортировать ReactiveFormsModule из «@ angular / forms» в файле details.module.ts.

Details.module.ts 

import { ReactiveFormsModule } from '@angular/forms';


@NgModule({
  imports:[ReactiveFormsModule]
})

Details.page.ts 

import { FormGroup, FormControl, Validators } from '@angular/forms';


inspectiondetailsform: FormGroup;

constructor() {

  ngOnInit() {
    buildForm();
  }

  buildForm() {
    this.inspectiondetailsform = new FormGroup({
       Date: new FormControl(null, {updateOn: 'change'}),
       InspectionType: new FormControl(null, {updateOn: 'change'}),
       Status: new FormControl(null, {updateOn: 'change'}),
       ProjectManager: new FormControl(null, {updateOn: 'change'}),
       Inspector: new FormControl(null, {updateOn: 'change'}),
       ReportWriter: new FormControl(null, {updateOn: 'change'}),
    })
  }

  saveInspectionChanges() {
    if (!this.inspectiondetailsform.valid) {
       return;
    }

    // Passing the value of date as an argument
    const data = this.inspectiondetailsform.value.Date;
    this.updateInspection(data);
  }
}
...