NgModelGroup 表單範例

可以使用MgModelGroup，將ngModel結合成一個group

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>
-<pre>{{ form.value | json }}</pre>
+<pre> {{form.value| json }}</pre>

src/app/app.component.ts

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