[Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup
Angular in with group Form forms Angular2
2023-09-14 08:59:19 时间
The ngModelGroup
directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup
is often used in combination with fieldset
as they mostly represent the same idea of “grouping together inputs.”
<form name="myForm2" #formRef2="ngForm" (ngSubmit)="onSubmit(formRef2.value)"> <fieldset ngModelGroup="login"> <legend>Login:</legend> Username: <input type="text" name="username" ngModel required> Password: <input type="password" name="password" ngModel requried> </fieldset> </form> <pre> form value: {{formRef2.value | json}} form valid: {{formRef2.valid | json}} </pre>
相关文章
- [Angular 9] Built-in template syntax $any
- [Angular] New in V6.1
- [Angular] Read Custom HTTP Headers Sent by the Server in Angular
- [Angular] Using the Argon 2 Hashing Function In Our Sign Up Backend Service
- [Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)
- [Angular 2] Using a Value from the Store in a Reducer
- [Angular 2] Transclusion in Angular 2
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
- [AngularJS] New in Angular 1.3 - Performance Boost with debugInfoEnabled
- Angular组件生命周期钩子
- [Angular 14] Providers in Angular Route
- [Angular 9 Unit testing] Stronger typing for dependency injection in tests
- [Angular] Use Angular components in AngularJS applications with Angular Elements
- [Angular] Getting to Know the @Attribute Decorator in Angular
- [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests
- [Angular] Read Custom HTTP Headers Sent by the Server in Angular
- [Angular] Set Metadata in HTTP Headers with Angular HttpHeaders
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
- [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular 2] Handle Reactive Async opreations in Service
- [AngularJS]25. Built-in Angular Services
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- Angular Component input字段传递值的几种变式 variant
- Angular双向绑定的一个例子