5 lines
39 KiB
JSON
5 lines
39 KiB
JSON
|
{
|
||
|
|
"id": "guide/form-validation",
|
||
|
|
"title": "Validating form input",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/form-validation.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"validating-form-input\">Validating form input<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/form-validation#validating-form-input\"><i class=\"material-icons\">link</i></a></h1>\n<p>You can improve overall data quality by validating user input for accuracy and completeness.\nThis page shows how to validate user input from the UI and display useful validation messages,\nin both reactive and template-driven forms.</p>\n<p><strong>Prerequisites</strong></p>\n<p>Before reading about form validation, you should have a basic understanding of the following.</p>\n<ul>\n<li>\n<p><a href=\"https://www.typescriptlang.org/\" title=\"The TypeScript language\">TypeScript</a> and HTML5 programming.</p>\n</li>\n<li>\n<p>Fundamental concepts of <a href=\"guide/architecture\" title=\"Introduction to Angular app-design concepts\">Angular app design</a>.</p>\n</li>\n<li>\n<p>The <a href=\"guide/forms-overview\" title=\"Introduction to Angular forms\">two types of forms that Angular supports</a>.</p>\n</li>\n<li>\n<p>Basics of either <a href=\"guide/forms\" title=\"Template-driven forms guide\">Template-driven Forms</a> or <a href=\"guide/reactive-forms\" title=\"Reactive forms guide\">Reactive Forms</a>.</p>\n</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p>Get the complete example code for the reactive and template-driven forms used here to illustrate form validation.\nRun the <live-example></live-example>.</p>\n</div>\n<a id=\"template-driven-validation\"></a>\n<h2 id=\"validating-input-in-template-driven-forms\">Validating input in template-driven forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/form-validation#validating-input-in-template-driven-forms\"><i class=\"material-icons\">link</i></a></h2>\n<p>To add validation to a template-driven form, you add the same validation attributes as you\nwould with <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\">native HTML form validation</a>.\nAngular uses directives to match these attributes with validator functions in the framework.</p>\n<p>Every time the value of a form control changes, Angular runs validation and generates\neither a list of validation errors that results in an INVALID status, or null, which results in a VALID status.</p>\n<p>You can then inspect the control's state by exporting <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> to a local template variable.\nThe following example exports <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code> into a variable called <code>name</code>:</p>\n<code-example path=\"form-validation/src/app/template/hero-form-template.component.html\" region=\"name-with-error-msg\" header=\"template/hero-form-template.component.html (name)\">\n<input id=\"name\" name=\"name\" class=\"form-control\"\n required <a href=\"api/forms/MinLengthValidator\" class=\"code-anchor\">minlength</a>=\"4\" appForbiddenName=\"bob\"\n [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"hero.name\" #name=\"<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>\" >\n\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"name.invalid && (name.dirty || name.touched)\"\n class=\"alert alert-danger\">\n\n <div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"name.errors.required\">\n Name is required.\n </div>\n <div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"name.errors.minlength\">\n Name must be at least 4 characters long.\n </div>\n <div *<a href=\"api/common/NgIf\" class=\"co
|
||
|
|
}
|