docs(forms): add example apps for ngModelGroup (#11525)
This commit is contained in:
@ -21,39 +21,27 @@ export const modelGroupProvider: any = {
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates and binds a model group to a DOM element.
|
||||
* @whatItDoes Creates and binds a {@link FormGroup} instance to a DOM element.
|
||||
*
|
||||
* This directive can only be used as a child of {@link NgForm}.
|
||||
* @howToUse
|
||||
*
|
||||
* ```typescript
|
||||
* @Component({
|
||||
* selector: 'my-app',
|
||||
* template: `
|
||||
* <div>
|
||||
* <h2>Angular forms Example</h2>
|
||||
* <form #f="ngForm">
|
||||
* <div ngModelGroup="name" #mgName="ngModelGroup">
|
||||
* <h3>Enter your name:</h3>
|
||||
* <p>First: <input name="first" ngModel required></p>
|
||||
* <p>Middle: <input name="middle" ngModel></p>
|
||||
* <p>Last: <input name="last" ngModel required></p>
|
||||
* </div>
|
||||
* <h3>Name value:</h3>
|
||||
* <pre>{{ mgName.value | json }}</pre>
|
||||
* <p>Name is {{mgName?.valid ? "valid" : "invalid"}}</p>
|
||||
* <h3>What's your favorite food?</h3>
|
||||
* <p><input name="food" ngModel></p>
|
||||
* <h3>Form value</h3>
|
||||
* <pre>{{ f.value | json }}</pre>
|
||||
* </form>
|
||||
* </div>
|
||||
* `
|
||||
* })
|
||||
* export class App {}
|
||||
* ```
|
||||
* This directive can only be used as a child of {@link NgForm} (or in other words,
|
||||
* within `<form>` tags).
|
||||
*
|
||||
* This example declares a model group for a user's name. The value and validation state of
|
||||
* this group can be accessed separately from the overall form.
|
||||
* Use this directive if you'd like to create a sub-group within a form. This can
|
||||
* come in handy if you want to validate a sub-group of your form separately from
|
||||
* the rest of your form, or if some values in your domain model make more sense to
|
||||
* consume together in a nested object.
|
||||
*
|
||||
* Pass in the name you'd like this sub-group to have and it will become the key
|
||||
* for the sub-group in the form's full value. You can also export the directive into
|
||||
* a local template variable using `ngModelGroup` (ex: `#myGroup="ngModelGroup"`).
|
||||
*
|
||||
* {@example forms/ts/ngModelGroup/ng_model_group_example.ts region='Component'}
|
||||
*
|
||||
* * **npm package**: `@angular/forms`
|
||||
*
|
||||
* * **NgModule**: `FormsModule`
|
||||
*
|
||||
* @stable
|
||||
*/
|
||||
|
Reference in New Issue
Block a user