Filipe Silva
Ward Bell
parent
a6ca213866
commit
92574937f3
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// #docregion
|
||||
(function(app) {
|
||||
app.AppComponent = ng.core
|
||||
.Component({
|
||||
selector: 'my-app',
|
||||
template: '<hero-form></hero-form>',
|
||||
directives: [app.HeroFormComponent]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
})(window.app || (window.app = {}));
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// #docregion
|
||||
(function(app) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ng.platform.browser.bootstrap(app.AppComponent);
|
||||
});
|
||||
})(window.app || (window.app = {}));
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<!-- #docplaster -->
|
||||
<!-- #docregion final -->
|
||||
<div class="container">
|
||||
<!-- #docregion edit-div -->
|
||||
<div [hidden]="submitted">
|
||||
<h1>Hero Form</h1>
|
||||
<!-- #docregion ngSubmit -->
|
||||
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
|
||||
<!-- #enddocregion ngSubmit -->
|
||||
<!-- #enddocregion edit-div -->
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<!-- #docregion name-with-error-msg -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
ngControl="name" #name="ngForm" >
|
||||
<div [hidden]="name.valid" class="alert alert-danger">
|
||||
Name is required
|
||||
</div>
|
||||
<!-- #enddocregion name-with-error-msg -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo"
|
||||
ngControl="alterEgo" >
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power"
|
||||
ngControl="power" #power="ngForm" >
|
||||
<option *ngFor="#p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
<div [hidden]="power.valid" class="alert alert-danger">
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- #docregion submit-button -->
|
||||
<button type="submit" class="btn btn-default"
|
||||
[disabled]="!heroForm.form.valid">Submit</button>
|
||||
<!-- #enddocregion submit-button -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- #docregion submitted -->
|
||||
<div [hidden]="!submitted">
|
||||
<h2>You submitted the following:</h2>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Name</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.name }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Alter Ego</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Power</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.power }}</div>
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-default" (click)="submitted=false">Edit</button>
|
||||
</div>
|
||||
<!-- #enddocregion submitted -->
|
||||
</div>
|
||||
<!-- #enddocregion final -->
|
||||
|
||||
<!-- ==================================================== -->
|
||||
<div>
|
||||
<form>
|
||||
<!-- #docregion edit-div -->
|
||||
|
||||
<!-- ... all of the form ... -->
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion edit-div -->
|
||||
|
||||
<!-- ==================================================== -->
|
||||
<hr>
|
||||
<style>
|
||||
.no-style .ng-valid {
|
||||
border-left: 1px solid #CCC
|
||||
}
|
||||
|
||||
.no-style .ng-invalid {
|
||||
border-left: 1px solid #CCC
|
||||
}
|
||||
</style>
|
||||
<div class="no-style" style="margin-left: 4px">
|
||||
<!-- #docregion start -->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion start -->
|
||||
<!-- #docregion powers -->
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required>
|
||||
<option *ngFor="#p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion powers -->
|
||||
<!-- #docregion start -->
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion start -->
|
||||
<!-- #enddocregion phase1-->
|
||||
|
||||
<!-- ==================================================== -->
|
||||
<hr>
|
||||
<!-- #docregion phase2-->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<!-- #docregion ngModel-2-->
|
||||
{{diagnostic()}}
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name" >
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power" >
|
||||
<option *ngFor="#p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion ngModel-2-->
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion phase2-->
|
||||
|
||||
<!-- EXTRA MATERIAL FOR DOCUMENTATION -->
|
||||
<hr>
|
||||
<!-- #docregion ngModel-1-->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name" >
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-1-->
|
||||
<hr>
|
||||
<!-- #docregion ngModel-3-->
|
||||
<input type="text" class="form-control" required
|
||||
[ngModel]="model.name"
|
||||
(ngModelChange)="model.name = $event" >
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-3-->
|
||||
<hr>
|
||||
<form>
|
||||
<!-- #docregion ngControl-1 -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
ngControl="name" >
|
||||
<!-- #enddocregion ngControl-1 -->
|
||||
<hr>
|
||||
<!-- #docregion ngControl-2 -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
ngControl="name" #spy >
|
||||
<br>TODO: remove this: {{spy.className}}
|
||||
<!-- #enddocregion ngControl-2 -->
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<hr>
|
||||
Name via form.controls = {{showFormControls(heroForm)}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion first, final
|
||||
(function(app) {
|
||||
app.HeroFormComponent = ng.core
|
||||
.Component({
|
||||
selector: 'hero-form',
|
||||
templateUrl: 'app/hero-form.component.html'
|
||||
})
|
||||
.Class({
|
||||
// #docregion submitted
|
||||
constructor: function() {
|
||||
// #enddocregion submitted
|
||||
this.powers = ['Really Smart', 'Super Flexible',
|
||||
'Super Hot', 'Weather Changer'
|
||||
];
|
||||
|
||||
this.model = new app.Hero(18, 'Dr IQ', this.powers[0],
|
||||
'Chuck Overstreet');
|
||||
|
||||
// #docregion submitted
|
||||
this.submitted = false;
|
||||
},
|
||||
onSubmit: function() {
|
||||
this.submitted = true;
|
||||
},
|
||||
// #enddocregion submitted
|
||||
|
||||
// #enddocregion final
|
||||
// TODO: Remove this when we're done
|
||||
diagnostic: function() {
|
||||
return JSON.stringify(this.model);
|
||||
},
|
||||
// #enddocregion first
|
||||
|
||||
|
||||
//////// DO NOT SHOW IN DOCS ////////
|
||||
|
||||
// Reveal in html:
|
||||
// AlterEgo via form.controls = {{showFormControls(hf)}}
|
||||
showFormControls: function(form) {
|
||||
return form.controls['alterEgo'] &&
|
||||
// #docregion form-controls
|
||||
form.controls['name'].value; // Dr. IQ
|
||||
// #enddocregion form-controls
|
||||
},
|
||||
/////////////////////////////
|
||||
|
||||
// #docregion first, final
|
||||
});
|
||||
// #enddocregion first, final
|
||||
})(window.app || (window.app = {}));
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// #docregion
|
||||
(function(app) {
|
||||
app.Hero = Hero;
|
||||
|
||||
function Hero(id, name, power, alterEgo) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.power = power;
|
||||
this.alterEgo = alterEgo;
|
||||
}
|
||||
})(window.app || (window.app = {}));
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- #docplaster -->
|
||||
<!-- #docregion -->
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Hero Form</title>
|
||||
<!-- #docregion bootstrap -->
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<!-- #enddocregion bootstrap -->
|
||||
<!-- #docregion styles -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- #enddocregion styles -->
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.umd.js"></script>
|
||||
<!-- #docregion scripts-hero, scripts-hero-form -->
|
||||
<script src='app/hero.js'></script>
|
||||
<!-- #enddocregion scripts-hero -->
|
||||
<script src='app/hero-form.component.js'></script>
|
||||
<!-- #enddocregion scripts-hero-form -->
|
||||
<!-- #docregion scripts, scripts-hero, scripts-hero-form -->
|
||||
<script src='app/app.js'></script>
|
||||
<script src='app/boot.js'></script>
|
||||
<!-- #enddocregion scripts, scripts-hero, scripts-hero-form -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "angular2-examples-master",
|
||||
"version": "1.0.0",
|
||||
"description": "Master package.json, the superset of all dependencies for all of the _example package.json files.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"lite": "lite-server",
|
||||
"live": "live-server",
|
||||
"start": "npm run lite",
|
||||
"both": "concurrent \"npm run tsc:w\" \"npm run start\" ",
|
||||
"test": "karma start karma.conf.js",
|
||||
"build-and-test": "npm run tsc && npm run test"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.52",
|
||||
"systemjs": "0.19.6",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.33.3",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-alpha.14",
|
||||
"zone.js": "0.5.8",
|
||||
"bootstrap": "^3.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^1.0.0",
|
||||
"lite-server": "^1.3.1",
|
||||
"live-server": "^0.8.2",
|
||||
"typescript": "^1.7.3",
|
||||
"jasmine-core":"~2.1.0",
|
||||
"karma": "^0.12.23",
|
||||
"karma-chrome-launcher": "^0.1.4",
|
||||
"karma-cli": "^0.0.4",
|
||||
"karma-jasmine": "^0.3.6",
|
||||
"rimraf": "^2.4.3"
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"description": "Forms",
|
||||
"files": ["**/*.js"]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/* #docregion */
|
||||
.ng-valid[required] {
|
||||
border-left: 5px solid #42A948; /* green */
|
||||
}
|
||||
|
||||
.ng-invalid {
|
||||
border-left: 5px solid #a94442; /* red */
|
||||
}
|
||||
/* #enddocregion */
|
||||
|
|
@ -53,7 +53,7 @@ include ../../../../_includes/_util-fns
|
|||
We'll discuss and learn to build a template-driven form that looks like this:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/hf-1.png" width="400px" alt="Clean Form")
|
||||
img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
|
||||
|
||||
:marked
|
||||
Here at the *Hero Employment Agency* we use this form to maintain personal information about the
|
||||
|
|
@ -64,7 +64,7 @@ figure.image-display
|
|||
If we delete the hero name, the form displays a validation error in an attention-grabbing style:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/hf-2.png" width="400px" alt="Invalid, Name Required")
|
||||
img(src="/resources/images/devguide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required")
|
||||
|
||||
:marked
|
||||
Note that the submit button is disabled, and the "required" bar to the left of the input control changed from green to red.
|
||||
|
|
@ -259,7 +259,7 @@ figure.image-display
|
|||
Running the app right now would be disappointing.
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/hf-3.png" width="400px" alt="Early form with no binding")
|
||||
img(src="/resources/images/devguide/forms/hero-form-3.png" width="400px" alt="Early form with no binding")
|
||||
:marked
|
||||
We don't see hero data because we are not binding to the `Hero` yet.
|
||||
We know how to do that from earlier chapters.
|
||||
|
|
|
|||
|
|
@ -17,5 +17,10 @@
|
|||
"user-input": {
|
||||
"title": "User Input",
|
||||
"intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
|
||||
},
|
||||
|
||||
"forms": {
|
||||
"title": "Forms",
|
||||
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,640 @@
|
|||
include ../../../../_includes/_util-fns
|
||||
|
||||
:marked
|
||||
We’ve all used a form to login, submit a help request, place an order, book a flight,
|
||||
schedule a meeting and perform countless other data entry tasks.
|
||||
Forms are the mainstay of business applications.
|
||||
|
||||
Any seasoned web developer can slap together an HTML form with all the right tags.
|
||||
It's more challenging to create a cohesive data entry experience that guides the
|
||||
user efficiently and effectively through the workflow behind the form.
|
||||
|
||||
*That* takes design skills that are, to be frank, well out of scope for this chapter.
|
||||
|
||||
It also takes framework support for
|
||||
**two-way data binding, change tracking, validation, and error handling**
|
||||
... which we shall cover in this chapter on Angular forms.
|
||||
|
||||
We will build a simple form from scratch, one step at a time. Along the way we'll learn
|
||||
|
||||
- How to build an Angular form with a component and template
|
||||
|
||||
- The `ngModel` two-way data binding syntax for reading and writing values to input controls
|
||||
|
||||
- The `ngControl` directive to track the change state and validity of form controls
|
||||
|
||||
- The special CSS classes that `ngControl` adds to form controls and how we can use them to provide strong visual feedback
|
||||
|
||||
- How to display validation errors to users and enable/disable form controls
|
||||
|
||||
- How to share information across controls with template local variables
|
||||
|
||||
[Live Example](/resources/live-examples/forms/js/plnkr.html)
|
||||
.l-main-section
|
||||
:marked
|
||||
## Template-Driven Forms
|
||||
|
||||
Many of us will build forms by writing templates in the Angular [template syntax](./template-syntax.html) with
|
||||
the form-specific directives and techniques described in this chapter.
|
||||
.l-sub-section
|
||||
:marked
|
||||
That's not the only way to create a form but it's the way we'll cover in this chapter.
|
||||
:marked
|
||||
We can build almost any form we need with an Angular template $mdash; login forms, contact forms ... pretty much any business forms.
|
||||
We can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
|
||||
conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
|
||||
|
||||
It will be pretty easy because Angular handles many of the repetitive, boiler plate tasks we'd
|
||||
otherwise wrestle with ourselves.
|
||||
|
||||
We'll discuss and learn to build the following template-driven form:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
|
||||
|
||||
:marked
|
||||
Here at the *Hero Employment Agency* we use this form to maintain personal information about the
|
||||
heroes in our stable. Every hero needs a job. It's our company mission to match the right hero with the right crisis!
|
||||
|
||||
Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot.
|
||||
|
||||
If we delete the hero name, the form displays a validation error in an attention grabbing style:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required")
|
||||
|
||||
:marked
|
||||
Note that the submit button is disabled and the "required" bar to the left of the input control changed from green to red.
|
||||
|
||||
.l-sub-section
|
||||
p We'll' customize the colors and location of the "required" bar with standard CSS.
|
||||
|
||||
:marked
|
||||
We will build this form in the following sequence of small steps
|
||||
|
||||
1. Create the `Hero` model class
|
||||
1. Create the component that controls the form
|
||||
1. Create a template with the initial form layout
|
||||
1. Add the **ngModel** directive to each form input control
|
||||
1. Add the **ngControl** directive to each form input control
|
||||
1. Add custom CSS to provide visual feedback
|
||||
1. Show and hide validation error messages
|
||||
1. Handle form submission with **ngSubmit**
|
||||
1. Disable the form’s submit button until the form is valid
|
||||
|
||||
:marked
|
||||
## Setup
|
||||
Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html).
|
||||
|
||||
## Create the Hero Model Class
|
||||
|
||||
As users enter form data, we capture their changes and update an instance of a model.
|
||||
We can't layout the form until we know what the model looks like.
|
||||
|
||||
A model can be as simple as a "property bag" that holds facts about a thing of application importance.
|
||||
That describes well our `Hero` class with its three required fields (`id`, `name`, `power`)
|
||||
and one optional field (`alterEgo`).
|
||||
|
||||
Create a new file in the app folder called `hero.js` and give it the following constructor:
|
||||
|
||||
+makeExample('forms/js/app/hero.js', null, 'app/hero.js')
|
||||
|
||||
:marked
|
||||
It's an anemic model with few requirements and no behavior. Perfect for our demo.
|
||||
|
||||
The `alterEgo` is optional and the constructor lets us omit it by being the last argument.
|
||||
|
||||
We can create a new hero like this:
|
||||
code-example(format="").
|
||||
var myHero = new Hero(42, 'SkyDog',
|
||||
'Fetch any object at any distance', 'Leslie Rollover');
|
||||
console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
|
||||
:marked
|
||||
We update the `<head>` of the `index.html` to include this javascript file.
|
||||
|
||||
+makeExample('forms/js/index.html', 'scripts-hero', 'index.html (excerpt)')(format=".")
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Create a Form component
|
||||
|
||||
An Angular form has two parts: an HTML-based template and a code-based Component to handle data and user interactions.
|
||||
|
||||
We begin with the Component because it states, in brief, what the Hero editor can do.
|
||||
|
||||
Create a new file called `hero-form.component.js` and give it the following definition:
|
||||
|
||||
+makeExample('forms/js/app/hero-form.component.js', 'first', 'app/hero-form.component.js')
|
||||
|
||||
:marked
|
||||
There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
|
||||
|
||||
Understanding this component requires only the Angular 2 concepts we’ve learned in previous chapters
|
||||
|
||||
1. We use the `ng.core` object from the Angular library as we usually do.
|
||||
|
||||
1. The `Component()` selector value of "hero-form" means we can drop this form in a parent template with a `<hero-form>` tag.
|
||||
|
||||
1. The `templateUrl` property points to a separate file for template HTML called `hero-form.component.html`.
|
||||
|
||||
1. We defined dummy data for `model` and `powers` as befits a demo.
|
||||
Down the road, we can inject a data service to get and save real data
|
||||
or perhaps expose these properties as [inputs and outputs](./template-syntax.html#inputs-outputs) for binding to a
|
||||
parent component. None of this concerns us now and these future changes won't affect our form.
|
||||
|
||||
1. We threw in a `diagnostic` method at the end to return a JSON representation of our model.
|
||||
It'll help us see what we're doing during our development; we've left ourselves a cleanup note to discard it later.
|
||||
|
||||
Why don't we write the template inline in the component file as we often do
|
||||
elsewhere in the Developer Guide?
|
||||
|
||||
There is no “right” answer for all occasions. We like inline templates when they are short.
|
||||
Most form templates won't be short. TypeScript and JavaScript files generally aren't the best place to
|
||||
write (or read) large stretches of HTML and few editors are much help with files that have a mix of HTML and code.
|
||||
We also like short files with a clear and obvious purpose like this one.
|
||||
|
||||
We made a good choice to put the HTML template elsewhere.
|
||||
We'll write that template in a moment. Before we do, we'll take a step back
|
||||
and revise the `app.component.js` to make use of our new `HeroFormComponent`.
|
||||
|
||||
:marked
|
||||
Again we update the `<head>` of the `index.html` to include the new javascript file.
|
||||
|
||||
+makeExample('forms/js/index.html', 'scripts-hero-form', 'index.html (excerpt)')(format=".")
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Revise the *app.component.js*
|
||||
|
||||
`app.component.js` is the application's root component. It will host our new `HeroFormComponent`.
|
||||
|
||||
Replace the contents of the "QuickStart" version with the following:
|
||||
+makeExample('forms/js/app/app.component.js', null, 'app/app.component.js')
|
||||
|
||||
:marked
|
||||
.l-sub-section
|
||||
:marked
|
||||
There are only two changes:
|
||||
|
||||
1. The `template` is simply the new element tag identified by the component's `select` property.
|
||||
|
||||
1. The `directives` array tells Angular that our template depends upon the `HeroFormComponent`
|
||||
which is itself a Directive (as are all Components).
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Create an initial HTML Form Template
|
||||
|
||||
Create a new template file called `hero-form.component.html` and give it the following definition:
|
||||
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'start', 'app/hero-form.component.html')
|
||||
|
||||
:marked
|
||||
That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and
|
||||
opening them up for user input in input boxes.
|
||||
|
||||
The *Name* `<input>` control has the HTML5 `required` attribute;
|
||||
the *Alter Ego* `<input>` control does not because `alterEgo` is optional.
|
||||
|
||||
We've got a *Submit* button at the bottom with some classes on it.
|
||||
|
||||
**We are not using Angular yet**. There are no bindings. No extra directives. Just layout.
|
||||
|
||||
The `container`,`form-group`, `form-control`, and `btn` classes
|
||||
come from [Twitter Boostrap](http://getbootstrap.com/css/). Purely cosmetic.
|
||||
We're using Bootstrap to gussy up our form.
|
||||
Hey, what's a form without a little style!
|
||||
|
||||
.callout.is-important
|
||||
header Angular Forms Do Not Require A Style Library
|
||||
:marked
|
||||
Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or
|
||||
the styles of any external library. Angular apps can use any CSS library
|
||||
... or none at all.
|
||||
|
||||
:marked
|
||||
Let's add the stylesheet.
|
||||
|
||||
ol
|
||||
li Open a terminal window in the application root folder and enter the command:
|
||||
code-example(language="html" escape="html").
|
||||
npm install bootstrap --save
|
||||
li Open <code>index.html</code> and add the following link to the <code><head></code>.
|
||||
+makeExample('forms/js/index.html', 'bootstrap')(format=".")
|
||||
:marked
|
||||
.l-main-section
|
||||
:marked
|
||||
## Add Powers with ***ngFor**
|
||||
Our hero may choose one super power from a fixed list of Agency-approved powers.
|
||||
We maintain that list internally (in `HeroFormComponent`).
|
||||
|
||||
We'll add a `select` to our
|
||||
form and bind the options to the `powers` list using `NgFor`,
|
||||
a technique we might have seen before in the [Displaying Data](./displaying-data.html) chapter.
|
||||
|
||||
Add the following HTML *immediately below* the *Alter Ego* group.
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'powers', 'app/hero-form.component.html (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
We are repeating the `<options>` tag for each power in the list of Powers.
|
||||
The `#p` local template variable is a different power in each iteration;
|
||||
we display its name using the interpolation syntax with the double-curly-braces.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Two-way data binding with ***ngModel**
|
||||
Running the app right now would be disappointing.
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/hero-form-3.png" width="400px" alt="Early form with no binding")
|
||||
:marked
|
||||
We don't see hero data because we are not binding to the `Hero` yet.
|
||||
We know how to do that from earlier chapters.
|
||||
[Displaying Data](./displaying-data.html) taught us Property Binding.
|
||||
[User Input](./user-input.html) showed us how to listen for DOM events with an
|
||||
Event Binding and how to update a component property with the displayed value.
|
||||
|
||||
Now we need to display, listen, and extract at the same time.
|
||||
|
||||
We could use those techniques again in our form.
|
||||
Instead we'll introduce something new, the `NgModel` directive, that
|
||||
makes binding our form to the model super-easy.
|
||||
|
||||
Find the `<input>` tag for the "Name" and update it like this
|
||||
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'ngModel-1','app/hero-form.component.html (excerpt)')(format=".")
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
We appended a diagnostic interpolation after the input tag
|
||||
so we can see what we're doing.
|
||||
We left ourselves a note to throw it way when we're done.
|
||||
|
||||
:marked
|
||||
Focus on the binding syntax: `[(ngModel)]="..."`.
|
||||
|
||||
If we ran the app right now and started typing in the *Name* input box,
|
||||
adding and deleting characters, we'd see them appearing and disappearing
|
||||
from the interpolated text.
|
||||
At some point it might look like this.
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action")
|
||||
:marked
|
||||
The diagnostic is evidence that we really are flowing values from the input box to the model and
|
||||
back again. **That's two-way data binding!**
|
||||
|
||||
Let's add similar `[(ngModel)]` bindings to *Alter Ego* and *Hero Power*.
|
||||
We'll ditch the input box binding message
|
||||
and add a new binding at the top to the component's `diagnostic` method.
|
||||
Then we can confirm that two-way data binding works *for the entire Hero model*.
|
||||
|
||||
After revision the core of our form should have three `[(ngModel)]` bindings that
|
||||
look much like this:
|
||||
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'ngModel-2', 'app/hero-form.component.html (excerpt)')
|
||||
|
||||
:marked
|
||||
If we ran the app right now and changed every Hero model property, the form might display like this:
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in super action")
|
||||
:marked
|
||||
The diagnostic near the top of the form
|
||||
confirms that all of our changes are reflected in the model.
|
||||
|
||||
**Delete** the `{{diagnostic()}}` binding at the top as it has served its purpose.
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Inside [(ngModel)]
|
||||
*This section is an optional deep dive into [(ngModel)]. Not interested? Skip ahead!*
|
||||
|
||||
The punctuation in the binding syntax, <span style="font-family:courier"><b>[()]</b></span>, is a good clue to what's going on.
|
||||
|
||||
In a Property Binding, a value flows from the model to a target property on screen.
|
||||
We identify that target property by surrounding its name in brackets, <span style="font-family:courier"><b>[]</b></span>.
|
||||
This is a one-way data binding **from the model to the view**.
|
||||
|
||||
In an Event Binding, we flow the value from the target property on screen to the model.
|
||||
We identify that target property by surrounding its name in parentheses, <span style="font-family:courier"><b>()</b></span>.
|
||||
This is a one-way data binding in the opposite direction **from the view to the model**.
|
||||
|
||||
No wonder Angular chose to combine the punctuation as <span style="font-family:courier"><b>[()]</b></span>
|
||||
to signify a two-way data binding and a **flow of data in both directions**.
|
||||
|
||||
In fact, we can break the `NgModel` binding into its two separate modes
|
||||
as we do in this re-write of the "Name" `<input>` binding:
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'ngModel-3','app/hero-form.component.html (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
<br>The Property Binding should feel familiar. The Event Binding might seem strange.
|
||||
|
||||
The `ngModelChange` is not an `<input>` element event.
|
||||
It is actually an event property of the `NgModel` directive.
|
||||
When Angular sees a binding target in the form <span style="font-family:courier">[(abc)]</span>,
|
||||
it expects the `abc` directive to have an `abc` input property and an `abc-change` output property.
|
||||
|
||||
The other oddity is the template expression, `model.name = $event`.
|
||||
We're used to seeing an `$event` object coming from a DOM event.
|
||||
The `ngModelChange` property doesn't produce a DOM event; it's an Angular `EventEmitter`
|
||||
property that returns the input box value when it fires — which is precisely what
|
||||
we should assign to the model's `name' property.
|
||||
|
||||
Nice to know but is it practical? We almost always prefer `[(ngModel)]`.
|
||||
We might split the binding if we had to do something special in
|
||||
the event handling such as debounce or throttle the key strokes.
|
||||
|
||||
Learn more about `NgModel` and other template syntax in the
|
||||
[Template Syntax](./template-syntax.html) chapter.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Track change-state and validity with **ngControl**
|
||||
|
||||
A form isn't just about data binding. We'd also like to know the state of the controls on our form.
|
||||
The `NgControl` directive keeps track of control state for us.
|
||||
|
||||
.callout.is-helpful
|
||||
header NgControl requires Form
|
||||
:marked
|
||||
The `NgControl` is one of a family of `NgForm` directives that can only be applied to
|
||||
a control within a `<form`> tag.
|
||||
:marked
|
||||
Our application can ask an `NgControl` if the user touched the control,
|
||||
if the value changed, or if the value became invalid.
|
||||
|
||||
`NgControl` doesn't just track state; it updates the control with special
|
||||
Angular CSS classes from the set we listed above.
|
||||
We can leverage those class names to change the appearance of the
|
||||
control and make messages appear or disappear.
|
||||
|
||||
We'll explore those effects soon. Right now
|
||||
we should **add `ngControl`to all three form controls**,
|
||||
starting with the *Name* input box
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'ngControl-1', 'app/hero-form.component.html (excerpt)')(format=".")
|
||||
:marked
|
||||
Be sure to assign a unique name to each `ngControl` directive.
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
Angular registers controls under their `ngControl` names
|
||||
with the `NgForm`.
|
||||
We didn't add the `NgForm` directive explicitly but it's here
|
||||
and we'll talk about it [later in this chapter](#ngForm).
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Add Custom CSS for Visual Feedback
|
||||
|
||||
`NgControl` doesn't just track state.
|
||||
It updates the control with three classes that reflect the state.
|
||||
|
||||
table
|
||||
tr
|
||||
th State
|
||||
th Class if true
|
||||
th Class if false
|
||||
tr
|
||||
td Control has been visited
|
||||
td <code>ng-touched</code>
|
||||
td <code>ng-untouched</code>
|
||||
tr
|
||||
td Control's value has changed
|
||||
td <code>ng-dirty</code>
|
||||
td <code>ng-pristine</code>
|
||||
tr
|
||||
td Control's value is valid
|
||||
td <code>ng-valid</code>
|
||||
td <code>ng-invalid</code>
|
||||
:marked
|
||||
Let's add a temporary [local template variable](./template-syntax.html#local-vars) named **spy**
|
||||
to the "Name" `<input>` tag and use the spy to display those classes.
|
||||
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'ngControl-2','app/hero-form.component.html (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
Now run the app and focus on the *Name* input box.
|
||||
Follow the next four steps *precisely*
|
||||
|
||||
1. Look but don't touched
|
||||
1. Click in the input box, then click outside the text input box
|
||||
1. Add slashes to the end of the name
|
||||
1. Erase the name
|
||||
|
||||
The actions and effects are as follows:
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/control-state-transitions-anim.gif" alt="Control State Transition")
|
||||
:marked
|
||||
We should be able to see the following four sets of class names and their transitions:
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/ng-control-class-changes.png" width="400px" alt="Control State Transitions")
|
||||
|
||||
:marked
|
||||
The (`ng-valid` | `ng-invalid`) pair are most interesting to us. We want to send a
|
||||
strong visual signal when the data are invalid and we want to mark required fields.
|
||||
|
||||
We realize we can do both at the same time with a colored bar on the left of the input box:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form")
|
||||
|
||||
:marked
|
||||
We achieve this effect by adding two styles to a new `styles.css` file
|
||||
that we add to our project as a sibling to `index.html`.
|
||||
|
||||
+makeExample('forms/js/styles.css',null,'styles.css')(format=".")
|
||||
:marked
|
||||
These styles select for the two Angular validity classes and the HTML 5 "required" attribute.
|
||||
|
||||
We update the `<head>` of the `index.html` to include this style sheet.
|
||||
+makeExample('forms/js/index.html', 'styles', 'index.html (excerpt)')(format=".")
|
||||
:marked
|
||||
## Show and Hide Validation Error messages
|
||||
|
||||
We can do better.
|
||||
|
||||
The "Name" input box is required. Clearing it turns the bar red. That says *something* is wrong but we
|
||||
don't know *what* is wrong or what to do about it.
|
||||
We can leverage the `ng-invalid` class to reveal a helpful message.
|
||||
|
||||
Here's the way it should look when the user deletes the name:
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/name-required-error.png" width="400px" alt="Name required")
|
||||
|
||||
:marked
|
||||
To achieve this effect we extend the `<input>` tag with
|
||||
1. a [local template variable](./template-syntax.html#local-vars)
|
||||
1. the "*is required*" message in a nearby `<div>` which we'll display only if the control is invalid.
|
||||
|
||||
Here's how we do it for the *name* input box:
|
||||
-var stylePattern = { otl: /(#name="form")|(.*div.*$)|(Name is required)/gm };
|
||||
+makeExample('forms/js/app/hero-form.component.html',
|
||||
'name-with-error-msg',
|
||||
'app/hero-form.component.html (excerpt)',
|
||||
stylePattern)
|
||||
:marked
|
||||
When we added the `ngControl` directive, we bound it to the the model's `name` property.
|
||||
|
||||
Here we initialize a template local variable (`name`) with the value "ngForm" (`#name="ngForm"`).
|
||||
Angular recognizes that syntax and re-sets the `name` local template variable to the
|
||||
`ngControl` directive instance.
|
||||
In other words, the `name` local template variable becomes a handle on the `ngControl` object
|
||||
for this input box.
|
||||
|
||||
Now we can control visibility of the "name" error message by binding the message `<div>` element's `hidden` property
|
||||
to the `ngControl` object's `valid` property. The message is hidden while the control is valid;
|
||||
the message is revealed when the control becomes invalid.
|
||||
<a id="ngForm"></a>
|
||||
.l-sub-section
|
||||
:marked
|
||||
### The NgForm directive
|
||||
We just set a template local variable with the value of an `NgForm` directive.
|
||||
Why did that work? We didn't add the **[`NgForm`](../api/core/NgForm-class.html) directive** explicitly.
|
||||
|
||||
Angular added it surreptiously, wrapping it around the `<form>` element
|
||||
|
||||
The `NgForm` directive supplements the `form` element with additional features.
|
||||
It collects `Controls` (elements identified by an `ngControl` directive)
|
||||
and monitors their properties including their validity.
|
||||
It also has its own `valid` property which is true only if every contained
|
||||
control is valid.
|
||||
:marked
|
||||
The Hero *Alter Ego* is optional so we can leave that be.
|
||||
|
||||
Hero *Power* selection is required.
|
||||
We can add the same kind of error handling to the `<select>` if we want
|
||||
but it's not imperative because the selection box already constrains the
|
||||
power to valid value.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Submit the form with **ngSubmit**
|
||||
The user should be able to submit this form after filling it in.
|
||||
The Submit button at the bottom of the form
|
||||
does nothing on its own but it will
|
||||
trigger a form submit because of its type (`type="submit"`).
|
||||
|
||||
A "form submit" is useless at the moment.
|
||||
To make it useful, we'll update the `<form>` tag with another Angular directive, `NgSubmit`,
|
||||
and bind it to the `HeroFormComponent.submit()` method with an event binding
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'ngSubmit')(format=".")
|
||||
|
||||
:marked
|
||||
We slipped in something extra there at the end! We defined a
|
||||
template local variable, **`#heroForm`**, and initialized it with the value, "ngForm".
|
||||
|
||||
The variable `heroForm` is now a handle to the `NgForm` directive that we [discussed earlier](#ngForm)
|
||||
This time `heroForm` remains a reference to the form as a whole.
|
||||
|
||||
Later in the template we bind the button's `disabled` property to the form's over-all validity via
|
||||
the `heroForm` variable. Here's that bit of markup:
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'submit-button')
|
||||
:marked
|
||||
Re-run the application. The form opens in a valid state and the button is enabled.
|
||||
|
||||
Now delete the *Name*. We violate the "name required" rule which
|
||||
is duely noted in our error message as before. And now the Submit button is also disabled.
|
||||
|
||||
Not impressed? Think about it for a moment. What would we have to do to
|
||||
wire the button's enable/disabled state to the form's validity without Angular's help?
|
||||
|
||||
For us, it was as simple as
|
||||
1. Define a template local variable on the (enhanced) form element
|
||||
2. Reference that variable in a button some 50 lines away.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Toggle two form regions (extra credit)
|
||||
Submitting the form isn't terribly dramatic at the moment.
|
||||
.l-sub-section
|
||||
:marked
|
||||
An unsurprising observation for a demo. To be honest,
|
||||
jazzing it up won't teach us anything new about forms.
|
||||
But this is an opportunity to exercise some of our newly won
|
||||
binding skills.
|
||||
If you're not interested, you can skip to the chapter's conclusion
|
||||
and not miss a thing.
|
||||
:marked
|
||||
Let's do something more strikingly visual.
|
||||
Let's hide the data entry area and display something else.
|
||||
|
||||
Start by wrapping the form in a `<div>` and bind
|
||||
its `hidden` property to the `HeroFormComponent.submitted` property.
|
||||
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'edit-div', 'app/hero-form.component.html (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
The main form is visible from the start because the
|
||||
the `submitted` property is false until we submit the form,
|
||||
as this fragment from the `HeroFormComponent` reminds us:
|
||||
|
||||
+makeExample('forms/js/app/hero-form.component.js', 'submitted')(format=".")
|
||||
|
||||
:marked
|
||||
When we click the Submit button, the `submitted` flag becomes true and the form disappears
|
||||
as planned.
|
||||
|
||||
Now we need to show something else while the form is in the submitted state.
|
||||
Add the following block of HTML below the `<div>` wrapper we just wrote:
|
||||
+makeExample('forms/js/app/hero-form.component.html', 'submitted', 'app/hero-form.component.html (excerpt)')
|
||||
|
||||
:marked
|
||||
There's our hero again, displayed read-only with interpolation bindings.
|
||||
This slug of HTML only appears while the component is in the submitted state.
|
||||
|
||||
We added an Edit button whose click event is bound to an expression
|
||||
that clears the `submitted` flag.
|
||||
|
||||
When we click it, this block disappears and the editable form reappears.
|
||||
|
||||
That's as much drama as we can muster for now.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Conclusion
|
||||
|
||||
The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation and more:
|
||||
|
||||
- An Angular HTML form template.
|
||||
- A form component class with a `Component` decorator.
|
||||
- The `ngSubmit` directive for handling the form submission.
|
||||
- Template local variables such as `#heroForm`, `#name`, `#alter-ego` and `#power`.
|
||||
- The `ngModel` directive for two-way data binding.
|
||||
- The `ngControl` for validation and form element change tracking.
|
||||
- The local variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
|
||||
- Controlling the submit button's enabled state by binding to `NgForm` validity.
|
||||
- Custom CSS classes that provide visual feedback to users about invalid controls.
|
||||
|
||||
Our final project folder structure should look like this:
|
||||
code-example(format="").
|
||||
angular2-forms
|
||||
├── node_modules
|
||||
├── app
|
||||
| ├── app.component.js
|
||||
| ├── boot.js
|
||||
| ├── hero.js
|
||||
| ├── hero-form.component.html
|
||||
| └── hero-form.component.js
|
||||
├── index.html
|
||||
├── styles.css
|
||||
├── tsconfig.json
|
||||
└── package.json
|
||||
:marked
|
||||
Here’s the final version of the source:
|
||||
|
||||
+makeTabs(
|
||||
`forms/js/app/hero-form.component.js,
|
||||
forms/js/app/hero-form.component.html,
|
||||
forms/js/app/hero.js,
|
||||
forms/js/app/app.component.js,
|
||||
forms/js/app/boot.js,
|
||||
forms/js/index.html,
|
||||
forms/js/styles.css`,
|
||||
'final, final,,,,,',
|
||||
`hero-form.component.js,
|
||||
hero-form.component.html,
|
||||
hero.js,
|
||||
app.component.js,
|
||||
boot.js,
|
||||
index.html,
|
||||
styles.css`)
|
||||
:marked
|
||||
|
|
@ -44,13 +44,13 @@ include ../../../../_includes/_util-fns
|
|||
We can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
|
||||
conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
|
||||
|
||||
It will be pretty easy because Angular handles many of the repeative, boiler plate tasks we'd
|
||||
It will be pretty easy because Angular handles many of the repetitive, boiler plate tasks we'd
|
||||
otherwise wrestle with ourselves.
|
||||
|
||||
We'll discuss and learn to build the following template-driven form:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/heroForm-1.png" width="400px" alt="Clean Form")
|
||||
img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
|
||||
|
||||
:marked
|
||||
Here at the *Hero Employment Agency* we use this form to maintain personal information about the
|
||||
|
|
@ -61,7 +61,7 @@ figure.image-display
|
|||
If we delete the hero name, the form displays a validation error in an attention grabbing style:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/heroForm-2.png" width="400px" alt="Invalid, Name Required")
|
||||
img(src="/resources/images/devguide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required")
|
||||
|
||||
:marked
|
||||
Note that the submit button is disabled and the "required" bar to the left of the input control changed from green to red.
|
||||
|
|
@ -243,7 +243,7 @@ ol
|
|||
Running the app right now would be disappointing.
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/heroForm-3.png" width="400px" alt="Early form with no binding")
|
||||
img(src="/resources/images/devguide/forms/hero-form-3.png" width="400px" alt="Early form with no binding")
|
||||
:marked
|
||||
We don't see hero data because we are not binding to the `Hero` yet.
|
||||
We know how to do that from earlier chapters.
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Loading…
Reference in New Issue