Basic knowledge
Basic use of Angular CLI
Install the Angular CLI (optional)
npm install -g @angular/cli
Create a new project
ng new PROJECT-NAME
Start the local server
cd PROJECT-NAME ng serve
Angular Forms Introduction
There are two forms in Angular 4:
- Template Driven Forms - Template-driven form (similar to forms in AngularJS)
- Reactive Forms - Responsive Forms
This article mainly introduces the basic knowledge of Template Driven Forms, and the relevant knowledge points will be introduced in the form of questions and answers.
Section 1 - Create the easiest input box
How to achieve two-way binding?
In Angular form, we implement two-way binding through the ngModel directive.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<input type="text" [(ngModel)]="username">
{{username}}
`,
})
export class AppComponent {
username = 'semlinker';
}
Section 2 - Adding simple verification function
How to add verification function to form controls?
Currently, the built-in validators supported by Angular are as follows:
- required - Set the form control value to be non-empty
- email - Set the format of the form control value as email
- minlength - Set the minimum length of the form control value
- maxlength - Set the maximum length of the form control value
- pattern - Set the value of the form control to match the pattern corresponding to the pattern
Next, let’s add the simplest required verification.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<input
type="text"
required
[(ngModel)]="username">
{{username}}
`,
})
export class AppComponent {
username = 'semlinker';
}
How to determine whether the form control has passed the verification?
In Angular we can pass #userName="ngModel"Method to obtainngModel object, then pass Determine whether the form control passes verification.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<input
type="text"
required
[(ngModel)]="username"
#userName="ngModel">
{{}}
`,
})
export class AppComponent {
username = 'semlinker';
}
Section 3 - Display Error Message of Failed Verification
How to display error message for verification failure?
In Angular we can pass #userName="ngModel" Method to obtainngModel object, then pass through the object'serrors attribute to obtain the verification status of the corresponding verification rules (such as required, minlength, etc.).
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<input
type="text"
required
minlength="3"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="?.required">Please enter your username</div>
<div *ngIf="?.minlength">
The length of the username must be greater than {{?.}}，The current length is
{{?.}}
</div>
`,
})
export class AppComponent {
username = 'semlinker';
}
Section 4 - Creating a Form
How to use a form?
In Angular, we can use the familiar <form> tag to create forms.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form>
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="?.required">Please enter your username</div>
<div *ngIf="?.minlength">
The length of the username must be greater than {{?.}}，The current length is
{{?.}}
</div>
<button type="submit">submit</button>
</form>
`,
})
export class AppComponent {
username = 'semlinker';
}
It should be noted that when using<form> After the tag, ourusername Input box, must be addedname property.
How to get the value of a form submitted?
In Angular we can pass #loginForm="ngForm" Method to obtainngForm object, then pass to get the value of the form.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit()">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="?.required">Please enter your username</div>
<div *ngIf="?.minlength">
The length of the username must be greater than {{?.}}，The current length is
{{?.}}
</div>
<button type="submit">submit</button>
{{ | json}}
</form>
`,
})
export class AppComponent {
username = 'semlinker';
onSubmit(value) {
(value);
}
}
Section 5 - Introduction to ngModelGroup
What is the function of ngModelGroup?
ngModelGroup Directives are another special directive provided in Angular forms. They can group the input content of the form, making it easier for us to semantically distinguish inputs of different properties. For example, the contact person's information includes name and address. Now the name and address need to be collected in detail. The name can be refined into surnames and names, and the address can be refined into cities, districts, streets, etc.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit()">
<fieldset ngModelGroup="user">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="?.required">Please enter your username</div>
<div *ngIf="?.minlength">
The length of the username must be greater than {{?.}}，The current length is
{{?.}}
</div>
<input type="password" ngModel name="password">
</fieldset>
<button type="submit">submit</button>
<hr>
{{ | json}}
</form>
`,
})
export class AppComponent {
username = 'semlinker';
onSubmit(value) {
(value);
}
}
After the above code is successfully run，{{ | json}} Output result:
{ "user": { "username": "semlinker", "password": "123" } }
Section 6 - Add verification status style for form
How to add validation status style information to a form?
In Angular form, if the verification is passed, it will be added to the form control ng-valid Class, if verification fails, it will be added to the form controlng-invalid kind.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styles: [`
-invalid {
border: 3px solid red;
}
-valid {
border: 3px solid green;
}
`
],
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit()">
<fieldset ngModelGroup="user">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="?.required">Please enter your username</div>
<div *ngIf="?.minlength">
The length of the username must be greater than {{?.}}，The current length is
{{?.}}
</div>
<input type="password" required ngModel name="password">
</fieldset>
<button type="submit">submit</button>
<hr>
{{ | json}}
</form>
`,
})
export class AppComponent {
username = 'semlinker';
onSubmit(value) {
(value);
}
}
Section 7 - State of form control
In addition to form controlsvalid What other states are included in addition to states?
In Angular, form control has the following 6 states, which we can use#userName="ngModel" Method to obtainngModel object, and then obtain the status information of the control. The specific status is as follows:
- valid - Form control is valid
- invalid - form control is invalid
- pristine - Form control value has not changed
- dirty - Form control value has changed
- touched - Form control has been accessed
- untouched - Form control not visited
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styles: [`
-invalid {
border: 3px solid red;
}
-valid {
border: 3px solid green;
}
`
],
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit()">
<fieldset ngModelGroup="user">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<p>NameControl'svalidstate：{{}} - Indicates that the control is valid</p>
<p>NameControl'sinvalidstate：{{}} - Indicates that the control is invalid</p>
<p>NameControl'spristinestate：{{}} - Indicates that the control value has not changed</p>
<p>NameControl'sdirtystate：{{}} - Indicates that the control value has changed</p>
<p>NameControl'stouchedstate：{{}} - Indicates that the control has been accessed</p>
<p>NameControl'suntouchedstate：{{}} - Indicates that the control has not been accessed</p>
<div *ngIf="?.required">Please enter your username</div>
<div *ngIf="?.minlength">
The length of the username must be greater than {{?.}}，The current length is
{{?.}}
</div>
<input type="password" required ngModel name="password">
</fieldset>
<button type="submit">submit</button>
<hr>
{{ | json}}
</form>
`,
})
export class AppComponent {
username = 'semlinker';
onSubmit(value) {
(value);
}
}
Section 8 - Using a radio control
How to add a radio control?
In Angular, we pass<input name="***" type="radio"> Add a radio control.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm">
AngularVersion：
<div *ngFor="let version of versions;">
<input
[]="version"
name="version"
ngModel
required
[value]="version"
type="radio">
<label []="version">{{version}}</label>
</div>
<hr>
{{ | json}}
</form>
`,
})
export class AppComponent {
versions = ['', '', ''];
}
Section 9 - Using Multiple Choice Controls
How to add a multi-select control?
In Angular, we pass<select name="***"> Add multiple choice controls.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm">
AngularVersion：
<select name="version" [ngModel]="versions[0]">
<option
*ngFor="let version of versions;"
[value]="version">
{{version}}
</option>
</select>
<hr>
{{ | json}}
</form>
`,
})
export class AppComponent {
versions = ['', '', ''];
}
How to add required verification?
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styles: [`
-invalid + label:after {
content: '<-- Please select a version!'
}
`
],
template: `
<form #loginForm="ngForm">
AngularVersion：
<div>
<select name="version" [ngModel]="version" required>
<option
*ngFor="let version of versions;"
[value]="version">
{{version}}
</option>
</select>
<label></label>
</div>
<hr>
{{ | json}}
</form>
`,
})
export class AppComponent {
versions = ['','', '', ''];
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.