如何为Autosave反应性角2形式创建验证

Question

我需要有关如何创建自动架反应性角2形式的建议。基本上是该值中的用户类型，如果该值已验证，则表单为AutoSave。这是代码

    export class BusinessFoundationsPage {
      businessFoundationsForm: FormGroup;
      userId: string;
      YouTuber: YouTuber;
      loading: any;
      isThisFirstTimeFlag: boolean;
      businessFoundationsKey: string;
      locationId: string;
      constructor(public af: AngularFire, public navCtrl: NavController, public navParams: NavParams, public fb: FormBuilder, private loadingCtrl: LoadingController, public userData: UserData) {
        this.locationId = this.navParams.get('locationId');
        this.loading = this.loadingCtrl.create({
          content: 'Please wait...'
        });
        this.loading.present();
        this.businessFoundationsForm = this.fb.group({
          businessFoundationsQ1: ['', [Validators.required, Validators.minLength(10)]],
          businessFoundationsQ2: ['', [Validators.required, Validators.minLength(10)]]
        })
      }
      ionViewDidLoad() {
        console.log('ionViewDidLoad BusinessFoundationsPage');
        this.af.auth.subscribe(auth => {
          if (auth) {
            console.log ("Current State: Login");
            this.userId = auth.uid;
            this.userData.getUserDetail(this.userId).subscribe(user => {
              this.YouTuber = user;
              let formControls: any = this.businessFoundationsForm.controls;
              if (this.YouTuber.businessFoundations) {
                this.isThisFirstTimeFlag = false;
                this.userData.getBusinessFoundationsData(this.YouTuber.businessFoundations).subscribe(data => {
                  this.businessFoundationsKey = data.$key;
                  formControls.businessFoundationsQ1.setValue(data.businessFoundationsQ1);
                  formControls.businessFoundationsQ2.setValue(data.businessFoundationsQ2);
                  this.loading.dismiss();
                })
              } else {
                this.isThisFirstTimeFlag = true;
                this.loading.dismiss();
              }
            });
          } else {
            this.loading.dismiss();
            console.log ("Current State: NOT Login");
          }
        });
      }
      saveForm(): void {
        let data = this.businessFoundationsForm.value;
        let dataToSave = {
          locationId: this.locationId,
          uid: this.userId,
          youTuberName: this.YouTuber.name,
          businessFoundationsQ1: data.businessFoundationsQ1,
          businessFoundationsQ2: data.businessFoundationsQ2,
        }
        console.log (data);
        if (this.isThisFirstTimeFlag) {
          this.userData.createBusinessFoundationsData(this.userId, dataToSave);
        } else {
          this.userData.updateBusinessFoundationsData(this.businessFoundationsKey, dataToSave);
        }
      }
    }

3个输入字段具有验证器。重新计算器，验证器。minlength（10）。这是HTML：

    <form [formGroup]="businessFoundationsForm" (change)="saveForm()">
  <ion-item text-wrap>
    <ion-label floating>What additional revenue streams have the most growth potential for your channel?</ion-label>
    <ion-textarea fz-elastic formControlName="businessFoundationsQ1"></ion-textarea>
  </ion-item>
  <ion-item text-wrap>
    <ion-label floating>What is one business challenge you have and what can you do to improve in this area?</ion-label>
    <ion-textarea fz-elastic formControlName="businessFoundationsQ2"></ion-textarea>
  </ion-item>
</form>

每次通过击中我的firebase服务器更改输入时，都会保存表单。但是我希望它仅在验证其中一个字段时保存。另外，如果字段值相同，我也不想致电Firebase（保存操作）。基本上，我需要最大程度地减少数据库在没有用户的情况下单击"愚蠢的提交"按钮的情况下调用该操作的数据库。我在离子2 btw上。因此，假设情况可以是：

1. 输入字段首先是键入的，但不符合验证-SaveForm Stop。
2. 输入字段首先是键入的，并符合验证，但第二个字段仍然为空 - 保存save（autosave !!）
3. 输入字段第二是键入的，但不符合验证，第一个字段不更改 - saveform stop。
4. 输入字段第二键键入并符合验证，但是字段首先是空的 - 仍然是SaveForm Save（AutoSave !!）
5. 用户编辑字段首先但不符合验证，第二个字段不更改 - saveform stop。

我想不出其他情况。关于如何以反应性/可观察的反应形式构建它的任何建议？

Answer 1

订阅价值更改或以200 ms访问或更多，因此，如果用户未输入200 ms，则将调用订阅。如果表格有效，请保存

constructor(public af: AngularFire, public navCtrl: NavController, public navParams: NavParams, public fb: FormBuilder, private loadingCtrl: LoadingController, public userData: UserData) {
    this.locationId = this.navParams.get('locationId');
    this.loading = this.loadingCtrl.create({
        content: 'Please wait...'
    });
    this.loading.present();
    this.businessFoundationsForm = this.fb.group({
        businessFoundationsQ1: ['', [Validators.required, Validators.minLength(10)]],
        businessFoundationsQ2: ['', [Validators.required, Validators.minLength(10)]]
    })
    this.businessFoundationsForm.valueChanges
        .debounceTime(200)
        .subscribe(() => {
            if (businessFoundationsForm.valid && businessFoundationsForm.dirty) {
                this.saveForm();
                businessFoundationsForm.reset()
            }
        });
}