src/app/requestbook/requestbook.page.ts
| selector | app-requestbook |
| styleUrls | ./requestbook.page.scss |
| templateUrl | ./requestbook.page.html |
Properties |
Methods |
Accessors |
constructor(fb: FormBuilder, bookService: BookService)
|
|||||||||
|
Defined in src/app/requestbook/requestbook.page.ts:10
|
|||||||||
|
Parameters :
|
| addAuthor |
addAuthor()
|
|
Defined in src/app/requestbook/requestbook.page.ts:38
|
|
Returns :
void
|
| checkFormControlIsValid | ||||||
checkFormControlIsValid(control: string)
|
||||||
|
Defined in src/app/requestbook/requestbook.page.ts:49
|
||||||
|
Parameters :
Returns :
any
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/requestbook/requestbook.page.ts:14
|
|
Returns :
void
|
| removeAuthor | ||||
removeAuthor(i)
|
||||
|
Defined in src/app/requestbook/requestbook.page.ts:45
|
||||
|
Parameters :
Returns :
void
|
| getErrorMessage |
Default value : () => {...}
|
|
Defined in src/app/requestbook/requestbook.page.ts:25
|
| onSubmit |
Default value : () => {...}
|
|
Defined in src/app/requestbook/requestbook.page.ts:53
|
| requestForm |
Type : FormGroup
|
|
Defined in src/app/requestbook/requestbook.page.ts:12
|
| authors |
getauthors()
|
|
Defined in src/app/requestbook/requestbook.page.ts:34
|
import { BookRequest } from 'src/app/models/BookRequest';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormArray } from '@angular/forms';
import { BookService } from '../services/book/book.service';
@Component({
selector: 'app-requestbook',
templateUrl: './requestbook.page.html',
styleUrls: ['./requestbook.page.scss']
})
export class RequestbookPage implements OnInit {
constructor(private fb: FormBuilder, private bookService: BookService) {}
requestForm: FormGroup;
ngOnInit() {
this.requestForm = this.fb.group({
title: ['', Validators.required],
authors: this.fb.array([]),
category: ['', [Validators.required]],
ISBN: ['', [Validators.required]],
description: ['', Validators.required]
});
this.addAuthor();
}
getErrorMessage = (controller: string) => {
const formController = this.requestForm.controls[controller];
return formController.hasError('required')
? 'You must enter a value'
: formController.hasError('email')
? 'Not a valid email'
: '';
};
get authors() {
return this.requestForm.get('authors') as FormArray;
}
addAuthor() {
const author = this.fb.group({
author: ['', Validators.required]
});
this.authors.push(author);
}
removeAuthor(i) {
this.authors.removeAt(i);
}
checkFormControlIsValid(control: string) {
return this.requestForm.controls[control].invalid;
}
onSubmit = () => {
let authors: Array<String> = this.requestForm.get('authors').value;
authors = authors.map(authorfield => authorfield['author']);
const request: BookRequest = {
description: this.requestForm.get('description').value,
ISBN: this.requestForm.get('ISBN').value,
title: this.requestForm.get('title').value,
authors
};
this.bookService.placingBookRequest(request);
};
}
<app-menu-title title="Request Book"></app-menu-title>
<ion-content class="ion-padding">
<ion-text>
We are willing to gather your requests and obtain the latest, best and most demanding books. You
can provide the details of the book including
<b>Book title, Author, Edition, Publisher, ISBN, Image</b>
</ion-text>
<ion-card
padding
style="min-height: 80vh;display:flex;flex-direction: column;align-content: space-between"
>
<form [formGroup]="requestForm">
<mat-form-field style="display: block" appearance="outline">
<mat-label>Enter Title of Book</mat-label>
<input matInput placeholder="Title" formControlName="title" />
<mat-error *ngIf="checkFormControlIsValid('title')">{{
getErrorMessage('title')
}}</mat-error>
</mat-form-field>
<div style="display: flex;align-items: center;">
<div style="width: 80%" formArrayName="authors">
<div *ngFor="let author of authors.controls; let i = index" [formGroupName]="i">
<mat-form-field appearance="outline" style="display: block">
<mat-label>Authors</mat-label>
<input matInput placeholder="authors" formControlName="author" on />
<mat-error *ngIf="checkFormControlIsValid('authors')">{{
getErrorMessage('authors')
}}</mat-error>
</mat-form-field>
<ion-button *ngIf="authors.controls.length > 1" (click)="removeAuthor()"
>Delete</ion-button
>
</div>
</div>
<div style="width: 20%">
<ion-button size="small" style="float: right" (click)="addAuthor()">add</ion-button>
</div>
</div>
<mat-form-field style="display: block" appearance="outline">
<mat-label>Enter Category</mat-label>
<input matInput placeholder="Category" formControlName="category" />
<mat-error *ngIf="checkFormControlIsValid('category')">{{
getErrorMessage('category')
}}</mat-error>
</mat-form-field>
<mat-form-field style="display: block" appearance="outline">
<mat-label>Enter ISBN</mat-label>
<input matInput placeholder="ISBN" formControlName="ISBN" />
<mat-error *ngIf="checkFormControlIsValid('ISBN')">{{ getErrorMessage('ISBN') }}</mat-error>
</mat-form-field>
<mat-form-field style="display: block" appearance="outline">
<mat-label>Enter Description</mat-label>
<input matInput placeholder="description" formControlName="description" />
<mat-error *ngIf="checkFormControlIsValid('description')">{{
getErrorMessage('description')
}}</mat-error>
</mat-form-field>
</form>
<app-fileupload></app-fileupload>
<div>
<ion-button
color="danger"
[disabled]="requestForm.invalid"
(click)="onSubmit()"
class="ion-float-right"
>
Submit
</ion-button>
</div>
</ion-card>
</ion-content>
./requestbook.page.scss