离子形式在保存时保持刷新答案

【问题标题】：Ionic forms keep refreshing upon saving离子形式在保存时保持刷新
【发布时间】：2019-09-24 12:50:40
【问题描述】：

我正在尝试创建一个简单的表单，每次进行更改时都会保存到 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>

...表单继续

【问题讨论】：

如何提交表单？
当一个字段被改变时，它会激活 saveInspectionChanges() 函数
别在意我的最后一条评论，也删除了。
在form 标签内，如果你有一个submit button，那么你就会遇到这个问题。你能把完整的代码贴在form标签之间吗？
它不会让我在问题中添加更多代码。表单上没有提交按钮。我相信更改事件会不断被激活，但我不知道为什么？

标签： angular forms ionic-framework google-cloud-firestore

【解决方案1】：

您的 details.page.ts 文件代码错误。请记住，要使用响应式表单，您应该从 details.module.ts 文件中的“@angular/forms”导入 ReactiveFormsModule。

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);
  }
}

【讨论】：