update

Author: Mavlarn

README.md

@@ -1,11 +1,21 @@
-# angular2-template-driven-forms
-A example base project for tutorial 'angular2-template-driven-forms'.
+# angular2-forms-tutorial
+A example project for tutorial.
 
 ## How to use.
 Clone the repository, install the dependency and run:
 ```
-git clone https://github.com/Mavlarn/angular2-template-driven-forms
-cd angular2-template-driven-forms
+git clone https://github.com/Mavlarn/angular2-forms-tutorial
+cd angular2-forms-tutorial
 npm install
 npm start
 ```
+
+## tags ##
+该项目包含几个有关Angular2表单的实例，分别用下面的tag打了标签:
+ * template-driven
+ * model-driven
+
+可以使用下面的方法获取相关实例的代码:
+```
+git checkout template-driven
+```

app/template-forms/template-forms.component.css

@@ -3,7 +3,7 @@
   border-left: 5px solid #42A948; /* green */
 }
 
-.ng-invalid:not(form)  {
+.ng-invalid:not(form).ng-invalid:not(fieldset)  {
   border-left: 5px solid #a94442; /* red */
 }
 

app/template-forms/template-forms.component.html

@@ -1,5 +1,4 @@
-<p>个人信息<small> (更新个人信息)</small>
-</p>
+<p>个人信息<small> (更新个人信息)</small></p>
 
 <div>
     <form class="form-horizontal" #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate *ngIf="active">
@@ -24,24 +23,28 @@
         <div class="form-group">
             <label class="col-sm-2 control-label">电话:</label>
             <div class="col-sm-10">
-                <input class="form-control" type="text" name="mobile" [ngModel]="user.mobile" #mobile="ngModel" required>
-                <span *ngIf="mobile.pristine" class="label label-primary">未修改</span>
-                <span *ngIf="mobile.dirty" class="label label-warning">已修改</span>
-                <span *ngIf="mobile.valid" class="label label-success">有效</span>
+                <input class="form-control" type="text" name="mobile" [ngModel]="user.mobile" required minlength="11" maxlength="11">
+                <span *ngIf="userForm.controls.mobile?.pristine" class="label label-primary">未修改</span>
+                <span *ngIf="userForm.controls.mobile?.dirty" class="label label-warning">已修改</span>
+                <span *ngIf="userForm.controls.mobile?.valid" class="label label-success">有效</span>
+                <div [hidden]="userForm.controls.mobile?.valid || userForm.controls.mobile?.pristine" class="alert alert-danger">
+                    <p *ngIf="userForm.controls.mobile?.errors?.minlength">电话长度必须为11</p>
+                    <p *ngIf="userForm.controls.mobile?.errors?.required">必须输入电话</p>
+                </div>
             </div>
         </div>
 
         <fieldset ngModelGroup="address">
             <div class="form-group">
                 <label class="col-sm-2 control-label">城市:</label>
                 <div class="col-sm-10">
-                    <input class="form-control" type="text" name="city" [ngModel]="user.address.city" #city="ngModel" required>
+                    <input class="form-control" type="text" name="city" [ngModel]="user.address.city" required>
                 </div>
             </div>
             <div class="form-group">
                 <label class="col-sm-2 control-label">街道:</label>
                 <div class="col-sm-10">
-                    <input class="form-control" type="text" name="street" [ngModel]="user.address.street" #street="ngModel" required>
+                    <input class="form-control" type="text" name="street" [ngModel]="user.address.street" required>
                 </div>
             </div>
         </fieldset>
@@ -50,6 +53,7 @@
             <button type="submit" class="btn btn-default col-sm-2">保存</button>
             <div class="col-sm-10">
                 <p class="error-msg">{{errorMsg}}</p>
+                <p class="error-msg">{{nameErrorMsg}}</p>
             </div>
         </div>
         <div class="form-group">

app/template-forms/template-forms.component.ts

@@ -10,6 +10,7 @@ export class TemplateFormsComponent {
     user: any;
     active: Boolean = true;
     errorMsg: String;
+    nameErrorMsg: String;
     constructor() {
         this.user = {
             name: '张三',
@@ -24,8 +25,13 @@ export class TemplateFormsComponent {
         if (theForm.invalid) {
             this.errorMsg = 'validation errors!';
             if (theForm.controls['name'].errors) {
-                this.errorMsg += JSON.stringify(theForm.controls['name'].errors);
+                this.nameErrorMsg = 'name error:' + JSON.stringify(theForm.controls['name'].errors);
+            } else {
+                this.nameErrorMsg = null;
             }
+        } else {
+            this.errorMsg = null;
+            this.nameErrorMsg = null;
         }
         console.log(theForm.value);
     }
@@ -36,9 +42,11 @@ export class TemplateFormsComponent {
         };
         this.active = false;
         setTimeout(() => this.active = true, 0);
+        return false;
     }
     reset(theForm: NgForm) {
         theForm.reset();
+        return false;
     }
     diagnostic(model) {
         console.log(JSON.stringify(model));