This Week’s Outline

• Working with Form: Template-driven Approach

• Working with Form: Reactive Approach
• Angular FormArray
• Toast & Action Sheet Controller
Working with Forms
 Working with Forms

Template-driven Approach
Angular 2 automatically created the JavaScript representation of your form
for you whenever it detects a form element from your HTML code.

Reactive Approach
You create the form on your own programmatically, then you tell ionic
2 which form and form element in your HTML template it has to sync
with your form object and controls.
 Template-driven Approach

- Similar to forms in Angular 1

- Easier to understand
- Can only be tested in an end-to-end test as this requires
the presence of a DOM
- Good for simple forms—enough to build large range
forms
- More components and validations  less readability
 Template-driven Approach

1. Prepare the HTML form

• Use the <form> tag, and display it however you like (use list or grid for
example)
• <ion-label>
• For text type input: <ion-input type=“” name=“” placeholder=“”
fixed/floating>  type of text input: email, password, text,
number
• For non-text type: checkbox, radio, toggle, range, select, etc.
• <button ion-button type=“submit”></button>
 Template-driven Approach

2. Registering controls
• Add ngModel to the input elements, and do not forget to specify the
name
3. Submitting the form
• Edit the form element to have a local reference, and assign ngForm to
the reference to tell Angular that we want access
• Bind (ngSubmit)=“” in the form to add function to be fired when the
form is submitted
4. Accessing the data
• Receive the value of the submitted data using form.value.InputName
 Preparing the HTML Form
<form>
<ion-list>
<ion-item>
<ion-label fixed>Username:</ion-label>
<ion-input type="text" name="username" required
placeholder="Username"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" name="password" required
placeholder="Password"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Subscribed</ion-label>
<ion-toggle name="toggle"></ion-toggle>
</ion-item>
</ion-list>
<button ion-button type="submit" block>Save</button>
</form>
 Registering Controls
<form>
<ion-list>
<ion-item>
<ion-label fixed>Username:</ion-label>
<ion-input type="text" name="username" required
placeholder="Username" ngModel></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" name="password" required
placeholder="Password" ngModel></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Subscribed</ion-label>
<ion-toggle name="toggle" ngModel></ion-toggle>
</ion-item>
</ion-list>
<button ion-button type="submit" block>Save</button>
</form>
 Submitting the Form
<form #f="ngForm" (ngSubmit)="onAddUser(f)">
<ion-list>
<ion-item>
<ion-label fixed>Username:</ion-label>
<ion-input type="text" name="username" required placeholder="Username"
ngModel></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" name="password" required
placeholder="Password" ngModel></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Subscribed</ion-label>
<ion-toggle name="toggle" ngModel></ion-toggle>
</ion-item>
</ion-list>
<button ion-button type="submit" block [disabled]="!f.valid">Save</button>
</form>
TS
onAddUser(form: NgForm) {
console.log(form.value)
}
 Reactive Approach

- Able to unit test the validation logic

- Simpler to implement complex validation
- Good for applications with lots of inter-field validation
logic
- More powerful and suitable for large-scale application
 Reactive Approach

1. Prepare the HTML form

• Use the <form> tag, and display it however you like (use list or grid for
example)
• <ion-label>
• For text type input: <ion-input type=“” name=“” placeholder=“”
fixed/floating>
• For non-text type: checkbox, radio, toggle, range, select, etc.
• <button ion-button type=“submit”></button>
 Reactive Approach

1. Prepare the HTML form

2. Prepare the reactive form in the TypeScript file
3. Synchronize the reactive form and the HTML form
4. Accessing the data
 Reactive Approach

2. Prepare the reactive form in the TypeScript file

• Create a class property member with type FormGroup that will hold the form (needs
to be imported from @angular/forms)
• Prepare/initialize the reactive forms by setting the property (from the previous step)
to hold several form controls (using FormControl, also imported from @angular/forms)
• Set the default value of the form controls and the validators
3. Synchronize the reactive form and the HTML form
• Add [formGroup] and bind it to the formGroup property that is created in the previous
step
• Bind each input element using formControlName and make sure the name of the
elements are the same with the name specified in the reactive form
 Reactive Approach

4. Accessing the data

• Receive the value of the submitted data using formGroupName.value

https://angular.io/api/forms/FormGroup
https://angular.io/api/forms/FormControl
https://angular.io/api/forms/Validators
 Preparing the HTML Form
<form>
<ion-list>
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Class of</ion-label>
<ion-select>
<ion-option value="2017">2017</ion-option>
<ion-option value="2016">2016</ion-option>
<ion-option value="2015">2015</ion-option>
<ion-option value="2014" selected>2014</ion-option>
</ion-select>
</ion-item>
</ion-list>
<button ion-button type="submit" block color="secondary">Register me</button>
</form>
 Preparing the Reactive Form

userForm: FormGroup;

ngOnInit() {
this.initializeForm()
}

private initializeForm() {
this.userForm = new FormGroup({
username: new FormControl(null, Validators.required),
password : new FormControl(null, Validators.required),
classOf: new FormControl("2014", Validators.required)
})
}

onSubmit() {
console.log(this.userForm.value)
console.log(this.userForm.value.paymentStatus[0])
}
 Synchronizing the Reactive Form and the HTML Form
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<ion-list>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Class of</ion-label>
<ion-select formControlName="classOf">
<ion-option value="2017">2017</ion-option>
<ion-option value="2016">2016</ion-option>
<ion-option value="2015">2015</ion-option>
<ion-option value="2014" selected>2014</ion-option>
</ion-select>
</ion-item>
</ion-list>
<button ion-button type="submit" block [disabled]=“!userForm.valid">Register me</button>
</form>
TS
export class RegisterPage implements OnInit{
userForm: FormGroup;
ngOnInit() {
this.initializeForm()
}
private initializeForm() {
this.userForm = new FormGroup({
username: new FormControl(null, Validators.required),
password : new FormControl(null, Validators.required),
classOf: new FormControl("2014", Validators.required)
})
}
onSubmit() {
console.log(this.userForm.value)
}
}
 Angular FormArray
https://angular.io/api/forms/FormArray

FormArray is one of the three fundamental building

blocks used to define forms in Angular, along with
FormGroup and FormControl.

Wraps around an arbitrary amount of FormControl,

FormGroup or even other FormArray instances.

Dynamically add new FormControl.

 Angular FormArray
https://angular.io/api/forms/FormArray

<ion-list formArrayName="paymentStatus">
<ion-list-header color="primary">Payment Status</ion-list-header>
<ion-item>
<ion-label fixed>SKS</ion-label>
<ion-checkbox value="sks" formControlName="0"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label fixed>Bangunan</ion-label>
<ion-checkbox value="bangunan" formControlName="1"></ion-checkbox>
</ion-item>
</ion-list>

this.userForm = new FormGroup({

username: new FormControl(null, Validators.required),
password : new FormControl(null, Validators.required),
classOf: new FormControl("2014", Validators.required),
paymentStatus: new FormArray([new FormControl(false), new
FormControl(false)])
})
Angular FormArray
https://angular.io/api/forms/FormArray
 ToastController

https://ionicframework.com/docs/api/components/toast/ToastController/
 Toast
A Toast is a subtle notification commonly
used in modern applications.
Can be used to provide feedback about an
operation or to display a system message.
 Action Sheet
in Ionic

https://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/
Action Sheet
 Action Sheet

An Action Sheet is a dialog that lets the user choose from a set of
options.

It appears on top of the app's content, and must be manually dismissed

by the user before they can resume interaction with the app.
Toast & Action Sheet
Demo
 Template-driven Approach

Reactive Approach
Angular FormGroup, FormControl, and FormArray

Toast & Action Sheet Controller