Note for course Angular 4: Forms

TIPS

👉 Assignment example of using Forms in Angular (video)+ codes.
👉 Project using Form : codes.

Why Forms in Angular?

Because your app is SVC (single-view-component) → when you submit a form, how can web do it? → that's why angular need a special "things" for forms.

Get input values by the users

Check the valid of input

Styling conditionally the form

Left: HTML form → Right: key-value object can be submitted with the form.

2 approaches with forms

Template driven ← inferred from DOM (html)

Reactive ← form created programmatically and synchronized with the DOM → more controls

Template-driven form

👉 Codes for this section.

Everything you wanna do → do it in the template ← template-driven!!!!

Create a TD form

The form here don't make any HTML request. ← <form> has no attribute!

1// make sure
2// app.module.ts
3import { FormsModule } from '@angular/forms';
4
5@NgModule({
6	imports: [
7		FormsModule // with this, angular will auto create form based on <form> in html
8	]
9})
10export ...

Angular doesn't recognize auto elements of <form> (label, input,...) because there may be some inputs which aren't served when submitting a form (their functions are different from a function of a form but they're inside <form>) → ==need to tell angular which ones to be extra controlled?==

1<!-- app.component.ts -->
2<form>
3	<input type="text">        <!-- normal input (without "ngModel") -->
4	<input                     <!-- tell angular to control this input -->
5		type="text"
6		ngModel   <!-- looks like 2-way binding, ie. [(ngModel)] -->
7		name="username">  <!-- must have <- registered in JS representation of the form -->
8</form>

Submitting & Using the Form

👉 Codes for this section.

We can actually see what users entered.

1// If we use normal form
2<form>
3	<button type="submit">Submit</button> // normal behavior - sending http request
4</form>

1// We use ngSubmit
2<form (ngSubmit)="onSubmit(f)" #f="ngForm">
3														//   ^Hey, get me access to this form you created
4														//        automatically
5	<button type="submit">Submit</button>
6</form>

1// app.component.ts
2onSubmit(form: NgForm) {
3	console.log(form);
4	// Get the values user entered: form.value
5}

Get the values user entered: form.value

Form State

1// .html
2<form (ngSubmit)="onSubmit(f)" #f="">...</form>
3
4// .component.ts
5onSubmit(form: HTMLFormElement) {
6	console.log(form);
7}

form.controls → several properties to control the form.

form.dirty: true if we changed something in the form.

form.invalid / form.valid: if we add some invalidator / validator (to check the fields), this can be true or false.

Read more in official doc.

Access Form via `@ViewChild()`

👉 Codes for this section.

With #f (local ref), we can use @ViewChild. ⇒ Useful when you wanna access the form not only at the time you submit it but also earlier!

1// .html
2<form (ngSubmit)="onSubmit()" #f="ngForm">...</form>
3											//  ^don't have "f" here
4
5// .component.ts
6export class ... {
7	@ViewChild('f') signupForm: NgForm;
8
9	onSubmit() {
10		console.log(this.signupForm);
11	}
12

Validation

👉 Codes for this section.

1<form (ngSubmit)="onSubmit()" #f="ngForm">
2	<input
3		type="text"
4		ngModel
5		name="username"
6		required>
7<!--    ^default HTML attribute <- angular see it as a built-in directive -->
8
9	<input
10		type="email"
11		ngModel
12		required
13		email  // angular's directive, not html attribute -> make sure it's a valid email
14		#email="ngModel">
15		   <!-- ^ expose some additional info abt the controls -->
16
17	<span *ngIf="!email.valid && email.touched">Please enter valid email!</span>
18
19	<button
20		type="submit"
21		[disabled]="!f.valid">Submit</button>
22</form>

👉 List of all built-in validators.
👉 List of directives which can be added to your template.

There are 2 places for .valid information ← form.valid and form.controls.email.valid

When it's invalid (after clicking on submit) or valid → angular auto add classes to the html element ← we can use these class to style our element!

Enable HTML5 validation (by default, Angular disables it) → ngNativeValidate

1// if user touched in input and leave
2//   it but it's invalid
3input.ng-invalid.ng-touched{
4	...
5}

1// patterns (eg. number > 0)
2<input
3	type="number"
4	name="amount"
5	ngModel
6	pattern="^[1-9]+[0-9]*$"
7>

Set default values

👉 Codes for this section.

Using 1-way binding / property binding ([ngModel]) to set the default value.

1<select
2  id="secret"
3  class="form-control"
4  [ngModel]="defaultQuestion"
5  name="secret">
6  <option value="pet">Your first Pet?</option>
7  <option value="teacher">Your first teacher?</option>
8</select>
9
10// component.ts
11defaultQuestion = "pet";

Instantly react to changes

Before, the check only performed after clicking "Submit" → If you wanna check "lively" → Using two-way binding [(NgModel)]

1<div class="form-group">
2  <textarea
3    name="questionAnswer"
4    rows="3"
5    class="form-control"
6    [(ngModel)]="answer"></textarea>
7</div>
8<p>Your reply: {{ answer }}</p>

Binding with `NgModel`

0-way binding, NgModel → tell angular that this input is a control

1-way binding, [NgModel] → get this control a default value

2-way binding, [(NgModel)] → Instantly out / do whatever you want with that value

Grouping Form Controls

In a big form, we need to "group" some values into a group / validate some specific group of inputs.

1<div
2	ngModelGroup="userData" <!--  ^the key name for this group -->
3	#userData="NgModelGroup">
4	<!-- input fields -->
5</div>
6<p *ngIf="!userData.valid && userData.touched">User data is invalid!</p>

After submit: instead of getting form.value.email, but getting form.value.userData.email (and also form.controls.userData)

Radio buttons

👉 Codes for this section.

1<div class="radio" *ngFor="let gender of genders">
2  <label>
3    <input
4      type="radio"
5      name="gender"
6      ngModel
7      [value]="gender"
8      required>
9    {{ gender }}
10  </label>
11</div>
12
13<!-- .component.ts -->
14genders = ['male', 'female'];

Set values to input fields

(video) With this HTML file

1// .component.ts
2this.signupForm.setValue({
3	userData: {
4	  username: suggestedName,
5	  email: ''
6	},
7	secret: 'pet',
8	questionAnswer: '',
9	gender: 'male'
10});
11// down side -> overwrite all fields whenever we click "Suggest an Username".
12
13// If we wanna set value TO A SINGLE ONE FIELD?
14this.signupForm.form.patchValue({
15						//  ^patchValue is only available with .form
16  userData: {
17    username: suggestedName
18  }
19});

Using Form Data

👉 Codes for this section.

1// html
2<div *ngIf="submitted">
3  <h3>Your Data</h3>
4  <p>Username: {{ user.username }}</p>
5  <p>Mail: {{ user.email }}</p>
6  <p>Secret Question: Your first {{ user.secretQuestion }}</p>
7  <p>Answer: {{ user.answer }}</p>
8  <p>Gender: {{ user.gender }}</p>
9</div>

1// .component.ts
2export class AppComponent {
3	user = {
4    username: '',
5    email: '',
6    secretQuestion: '',
7    answer: '',
8    gender: ''
9  };
10  submitted = false;
11
12	onSubmit() {
13    this.submitted = true;
14    this.user.username = this.signupForm.value.userData.username;
15    this.user.email = this.signupForm.value.userData.email;
16    this.user.secretQuestion = this.signupForm.value.secret;
17    this.user.answer = this.signupForm.value.questionAnswer;
18    this.user.gender = this.signupForm.value.gender;
19
20    this.signupForm.reset(); // to reset the form
21  }
22}

Reactive Form

Create the form programmatically (not from scratch).

👉 Codes for this section + Video.

Setting up

👉 Codes for this section.

FormGroup → a form, in the end, it's just a group of controls.

We don't need FormsModule in app.module.ts (it's for template-driven form) → NEED ReactiveFormsModule

We don't need local reference anymore.

We configure all things in the typescript code (component.ts)

1// app.module.ts
2import { ReactiveFormsModule } from '@angular/forms';
3
4@NgModule({
5  imports: [
6    ReactiveFormsModule
7  ]
8})
9export ...

1// html
2<form [formGroup]="signupForm">
3//     ^hey, don't treat this form as normal or create form for me, just
4//        use my formgroup "signupForm" (in component.ts)
5	<input
6		formControlName="username">
7//  ^the name given in component.ts of this input field
8</form>

1// app.component.ts
2export ... OnInit {
3	signupForm: FormGroup;
4
5	ngOnInit() {
6		this.signupForm = new FormGroup({
7      'username': new FormControl(null);
8		// |      				|				    ^initial value
9		// |              ^each field is a FormControl
10		// ^the same name for "formControlName" in .html <- that's the link
11    });
12	}
13}

Grouping Controls

👉 Codes for this section.

FormGroup inside FormGroup.

1// .component.ts
2this.signupForm = new FormGroup({
3  'userData': new FormGroup({
4    'username': new FormControl(...),
5    'email': new FormControl(...)
6  }),
7  'gender': new FormControl('male'),
8});

1// html
2// need to put 'username' and 'email' inside a div
3<form [formGroup]="signupForm">
4	<div formGroupName="userData">
5		<input formControlName="username">
6
7		<span *ngIf="!signupForm.get('userData.username').valid>
8															//  ^new here
9			Please enter a valid username!
10		</span>
11
12		<input formControlName="email">
13	</div>
14</form>

`FormArray`

👉 Codes for this section.

Let the user dynamically add their form controls (we don't know yet there are how many controls there) → using an array of form.

Get access to FormArray

1// .component.ts
2this.signupForm = new FormGroup({
3  ...
4  'hobbies': new FormArray([])
5});

1// html
2<div formArrayName="hobbies">
3  <button
4    (click)="onAddHobby()">Add Hobby</button>
5  <div
6    *ngFor="let hobbyControl of signupForm.get('hobbies').controls; let i = index">
7    <input type="text" class="form-control" [formControlName]="i">
8  </div>
9</div>

1// 1st way
2// .ts
3getControls() {
4	return (<FormArray>this.signupForm.get('hobbies')).controls;
5}
6
7// .html
8*ngFor="let hobbyControl of getControls(); let i = index"

1// 2nd way (using getter)
2// .ts
3get controls() {
4	return (this.signupForm.get('hobbies') as FormArray).controls;
5}
6
7// .html
8*ngFor="let hobbyControl of controls; let i = index"

Validation

👉 Codes for this section.

1this.signupForm = new FormGroup({
2  'username': new FormControl(null, Validators.required);
3																					//   ^it's actually .required() but in
4																					//    this case, we wanna add a ref
5																					//    to this method, angular'll know
6																					//    to call it whenever we make changes
7	'email': new FormControl(null, [Validators.required, Validators.email]);
8															// ^multiple validations
9});

Get access directly to the FormControl using .get()

1<span
2	*ngIf="!signupForm.get('username').valid && signupForm.get('username').touched">
3	Please enter a valid username!
4</span>

1// for the overall form
2<span
3	*ngIf="!signupForm.valid && signupForm.touched">
4	Please enter valid data!
5</span>

Custom validation

👉 Codes for this section.

Suppose that we don't want users use some specific names.

1// .ts
2forbiddenUsernames = ['Chris', 'Anna'];
3
4ngOnInit() {
5	this.signupForm = new FormGroup({
6		'username': new FormControl(
7			null, [
8				Validators.required,
9				this.forbiddenNames.bind(this)]),
10											//   ^need this 'cause angular will call .forbiddenNames()
11											//    (not current class -> cannot use only "this." directly
12											//    -> let angular knows (binds) to current class as "this"
13	}
14}
15
16forbiddenNames(control: FormControl): {[s: string]: boolean} {
17																		// ^a return type
18  if (this.forbiddenUsernames.indexOf(control.value) !== -1) {
19																							//     ^return of .indexOf
20																							//      (if not contains) is "-1"
21    return {'nameIsForbidden': true};
22  }
23  return null;
24		//   ^we don't return ... "false" here because for angular, returning null
25		//      means "valid"
26}

1// use error message with "nameIsForbidden"
2// can use Inspect of the browser to check the location of "nameISForbidden"
3<span *ngIf="signupForm.get('userData.username').errors['nameIsForbidden']">
4	This name is invalid!
5</span>

Custom async validation

👉 Codes for this section.

(video) Suppose we wanna check "already-taken" emails from the server.

1this.signupForm = new FormGroup({
2  'email': new FormControl(
3		null, [Validators.required, Validators.email], this.forbiddenEmails)
4																								// ^can be an array,
5																								// this position is for async
6});
7
8forbiddenEmails(control: FormControl): Promise<any> | Observable<any> {
9  const promise = new Promise<any>((resolve, reject) => {
10    setTimeout(() => {
11      if (control.value === '[email protected]') {
12        resolve({'emailIsForbidden': true});
13      } else {
14        resolve(null);
15      }
16    }, 1500);
17  });
18  return promise;
19}

Form Status: `statusChanges`, `valueChanges`

.statusChanges → gives the status of the form (INVALID, VALID, PENDING,...)

.valueChanges → change something in the form (eg. typing something).

1ngOnInit() {
2	this.signupForm.valueChanges.subscribe(
3		(value) => console.log(value);
4	);
5}

Set values to input fields

1this.signupForm.setValue({
2  'userData': {
3    'username': 'Max',
4    'email': '[email protected]'
5  },
6  'gender': 'male',
7  'hobbies': []
8});
9// down side -> overwrite all fields whenever we click "Suggest an Username".

1// If we wanna set value TO A SINGLE ONE FIELD?
2this.signupForm.patchValue({
3  'userData': {
4    'username': 'Anna',
5  }
6});

Reset the form,

1onSubmit() {
2	this.signupForm.reset();
3										//  ^you can put object to reset specific values
4}

Note for course Angular 4: Forms

TIPS

Why Forms in Angular?

2 approaches with forms

Template-driven form

Create a TD form

Submitting & Using the Form

Form State

Access Form via @ViewChild()

Validation

Set default values

Instantly react to changes

Binding with NgModel

Grouping Form Controls

Radio buttons

Set values to input fields

Using Form Data

Reactive Form

Setting up

Grouping Controls

FormArray

Validation

Custom validation

Custom async validation

Form Status: statusChanges, valueChanges

Set values to input fields

Access Form via `@ViewChild()`

Binding with `NgModel`

`FormArray`

Form Status: `statusChanges`, `valueChanges`