自動保存リアクティブ 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サーバーにアクセスして入力が変更されるたびに、フォームが保存されます。しかし、フィールドの1つが検証されたときにのみ保存したいのです。また、フィールド値が同じ場合、Firebase を呼び出したくありません (保存操作)。基本的に、ユーザーが愚かな送信ボタンをクリックせずに絶対に必要なときに、アクションを呼び出すデータベースを最小限に抑える必要があります。私はIonic 2 BTWを使用しています。では、次のような状況が考えられるとしましょう。
- 入力フィールドは最初に入力されますが、検証を満たしていません - saveForm が停止します。
- 最初の入力フィールドが入力され、検証を満たしていますが、2 番目のフィールドはまだ空です - saveForm 保存 (自動保存!!)
- 入力フィールド 2 番目が入力されましたが、検証に適合せず、フィールド 1 が変更されません - saveForm が停止します。
- 入力フィールド 2 番目は入力され、検証を満たしていますが、最初のフィールドは空です - まだ saveForm 保存 (AutoSave!!)
- ユーザーは最初にフィールドを編集しましたが、検証を満たしていません。2 番目のフィールドは変更されません - saveForm が停止します。
他の状況は考えられません。反応性/観察可能な反応性フォームでこれを構築する方法に関する提案はありますか?