如何爲autosave反應式Angular 2表單創建驗證。

Question

我需要關於如何創建自動保存反應式Angular 2表單的建議。基本上用戶輸入值，如果該值被驗證，則表單是自動保存的。這裏是代碼

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個輸入字段有Validators.required，Validators.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順便說一句。假設情況如下：

1. 輸入字段先輸入，但不符合驗證 - saveForm停止。
2. 輸入字段第一個類型的，並符合驗證，但第二場仍然是空的 - saveForm保存（自動保存！）
3. 輸入字段二是類型化，但不能滿足驗證和現場第一是改變不了的 - saveForm停止。
4. 輸入字段二是輸入，並符合驗證，但第一場是空的 - 仍然saveForm保存（自動保存！）
5. 用戶編輯欄第一，但不符合驗證，第二場沒有改變 - saveForm停止。

我想不出其他情況。任何有關如何建立與反應/可觀察的反應形式的建議？

Answer 1

訂閱價值更改200毫秒debounce或更多，所以如果用戶沒有輸入200毫秒，那麼訂閱將被調用。如果表格有效，請保存

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

}