Browse Source

NgModelGroup 表單範例

可以使用MgModelGroup,將ngModel結合成一個group
master
HarveyChou 2 years ago
parent
commit
1f6eff2cdf
  1. 19
      src/app/app.component.html
  2. 4
      src/app/app.component.ts

19
src/app/app.component.html

@ -1,16 +1,7 @@
<form #form="ngForm" (submit)="onSubmit(form)">
<div>
帳號:<input type="text" name="id" ngModel/>
</div>
<div>
密碼:<input type="password" name="password" ngModel/>
</div>
<div>
something:<input type="text" name ="abc" ngModel/>
</div>
<div>
<button type="reset">重設</button>
<button type="submit">登入</button>
</div>
<form #form="ngForm">
<ng-container #user="ngModelGroup" ngModelGroup="user">
<div> 姓名: <input type="text" name="name" ngModel /></div>
<div> email:<input type="text" name="email" ngModel /></div>
</ng-container>
</form> </form>
<pre> {{form.value| json }}</pre> <pre> {{form.value| json }}</pre>

4
src/app/app.component.ts

@ -7,7 +7,5 @@ import { NgForm, NgModel } from '@angular/forms';
styleUrls: ['./app.component.css'], styleUrls: ['./app.component.css'],
}) })
export class AppComponent { export class AppComponent {
onSubmit(form:NgForm):void{
console.log('表單資料:', form.value);
}
} }
Loading…
Cancel
Save