src/app/feedback/feedback.page.ts
| selector | app-feedback |
| styleUrls | ./feedback.page.scss |
| templateUrl | ./feedback.page.html |
Properties |
Methods |
constructor(_formBuilder: FormBuilder, afs: AngularFirestore, loadingCtrl: LoadingController, swal: SwalService)
|
|||||||||||||||
|
Defined in src/app/feedback/feedback.page.ts:16
|
|||||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/feedback/feedback.page.ts:24
|
|
Returns :
void
|
| firstFormGroup |
Type : FormGroup
|
|
Defined in src/app/feedback/feedback.page.ts:14
|
| options |
Type : []
|
Default value : ['new feature', 'error/bug', 'improvement']
|
|
Defined in src/app/feedback/feedback.page.ts:16
|
| secondFormGroup |
Type : FormGroup
|
|
Defined in src/app/feedback/feedback.page.ts:15
|
| submitFeedback |
Default value : () => {...}
|
|
Defined in src/app/feedback/feedback.page.ts:33
|
import { SwalService } from './../services/swal/swal.service';
import { Feedback } from './../models/feedback';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { LoadingController } from '@ionic/angular';
@Component({
selector: 'app-feedback',
templateUrl: './feedback.page.html',
styleUrls: ['./feedback.page.scss']
})
export class FeedbackPage implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
options = ['new feature', 'error/bug', 'improvement'];
constructor(
private _formBuilder: FormBuilder,
private afs: AngularFirestore,
private loadingCtrl: LoadingController,
private swal: SwalService
) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
}
submitFeedback = async () => {
const loading = await this.loadingCtrl.create({
message: 'Sending your feedback',
spinner: 'crescent'
});
loading.present();
const feedback: Feedback = {
creationDate: new Date(),
type: this.firstFormGroup.controls['firstCtrl'].value,
message: this.secondFormGroup.controls['firstCtrl'].value
};
this.afs
.collection('Feedback')
.add({ ...feedback })
.then(() => {
this.swal.viewSuccessMessage('Successful', 'Feedback submitted!');
})
.catch(error => {
console.error('Error occured when sending the feedback', error);
this.swal.viewErrorMessage('Error', 'Error occurred while sending feedback!');
})
.finally(() => {
loading.dismiss();
});
};
}
<app-menu-title title="Feedback"></app-menu-title>
<ion-content class="ion-padding">
<ion-text>
We are highly appreciating feedback about the application. You can send us feature request, bug
report or anything related to the application
</ion-text>
<mat-vertical-stepper linear #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Select what kind of feedback you are providing</ng-template>
<mat-form-field>
<mat-label>Type of feedback</mat-label>
<mat-error *ngIf="firstFormGroup.controls['firstCtrl']">
Select type of feedback
</mat-error>
<mat-select formControlName="firstCtrl">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-raised-button matStepperNext color="primary">Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Give us details</ng-template>
<mat-form-field style="width:100%">
<mat-error *ngIf="secondFormGroup.controls['firstCtrl']">
Please elaborate more about the feedback
</mat-error>
<textarea matInput placeholder="Details" formControlName="firstCtrl" required></textarea>
</mat-form-field>
<div>
<button mat-raised-button matStepperPrevious color="warn" style="margin-right: 2rem;">
Back
</button>
<button mat-raised-button matStepperNext color="primary">Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Submit</ng-template>
Submit your feedback
<div style="padding: 5px;">
<button mat-raised-button matStepperPrevious color="primary">
Back
</button>
<button mat-raised-button matStepperPrevious color="accent" (click)="submitFeedback()">
Submit
</button>
<button mat-raised-button (click)="stepper.reset()" color="warn">Reset</button>
</div>
</mat-step>
</mat-vertical-stepper>
</ion-content>
./feedback.page.scss