Как создать валидацию для автосохранения реактивной формы 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 (операция сохранения). По сути, мне нужно минимизировать базу данных, вызывающую действие, когда это абсолютно необходимо, без нажатия пользователем кнопки глупой отправки. Я на Ionic 2 Кстати. Итак, скажем, ситуации могут быть:

1. Поле ввода сначала набирается, но не соответствует проверке - остановка saveForm.
2. Первое поле ввода набрано и соответствует проверке, но второе поле еще пусто - saveForm save (Автосохранение!!)
3. Поле ввода second набрано, но не соответствует валидации, а поле first не изменяется - saveForm останавливается.
4. Второе поле ввода набрано и соответствует проверке, но поле first пустое - все равно saveForm save (Автосохранение!!)
5. Сначала пользователь редактирует поле, но не соответствует действительности, второе поле не изменяется - команда saveForm останавливается.

Я не могу думать о других ситуациях. Любое предложение о том, как построить это с реактивной / наблюдаемой реактивной формой?

Answer 1

Подпишитесь на изменения значения с 200 мсек или более, поэтому если пользователь не печатает в течение 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()
            }
        });

}