clone (reactive) mdl form v1

Author: rxlabz

lib/components/md-reactive-form/md-reactive-form.css

@@ -1,3 +1,13 @@
 :host{
 
+}
+
+.blue {
+    color: #fff;
+    background-color: #38b;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
 }

lib/components/md-reactive-form/md-reactive-form.dart

@@ -1,3 +1,6 @@
+import 'dart:convert';
+
+import 'package:angular2/common.dart';
 import 'package:angular2/core.dart';
 import 'package:angular2_components/angular2_components.dart';
 
@@ -10,8 +13,52 @@ import 'package:angular2_components/angular2_components.dart';
 )
 class MdReativeForm implements OnInit{
 
-  MdReativeForm(){}
+  ControlGroup userForm;
+
+  MdReativeForm(FormBuilder fb) {
+    userForm = fb.group({
+      "name": ['', Validators.required],
+      "age": [
+        '',
+        Validators.compose([
+          Validators.required,
+              (AbstractControl c) {
+            if (c.value == '') return null;
+
+            var r = new RegExp('[0-9]*');
+            if (!r.hasMatch(c.value))
+              return {'Erreur': 'format incoorect'};
+
+            int.parse(c.value) > 0 ? null : {"incorrect": "numérique attendue"};
+          }
+        ])
+      ],
+      "genre": [2, Validators.required],
+      "newsletter": new Control(true)
+    });
+  }
 
   @override
   ngOnInit() {}
+
+  String get value {
+    return JSON.encode(userForm.value);
+  }
+
+  dynamic getModelValue(String propertyName) {
+    return userForm.value[propertyName];
+  }
+
+  onSubmit() {
+    print('FormMDL.onSubmit » value ${value}');
+  }
+
+  /// soit fonction Compo
+  /// soit ds template : `f.form.controls['genre'].updateValue('2')`
+  updateModel(String propName, dynamic v) {
+    print('FormMDL.updateModel » $propName » v ${v}');
+    (userForm.controls[propName] as Control).updateValue(v);
+    print('FormMDL.updateModel » value ${value}');
+    print('FormMDL.updateModel  userForm.valid ${userForm.valid}');
+  }
 }

lib/components/md-reactive-form/md-reactive-form.html

@@ -1 +1,55 @@
-<h1>MdReativeForm</h1>
+<h1>Material "Reactive" Form</h1>
+
+<div class="card mdl-shadow--2dp column">
+
+    <form novalidate [ngFormModel]="userForm" #f="ngForm"
+    >
+        <!--(ngSubmit)="onSubmit()"-->
+        <material-input ngControl="name" floatingLabel required label="Nom">
+        </material-input>
+        <!--<div [hidden]="f.form.controls['name'].valid">Requis</div>-->
+
+        <div>
+            <material-input #age type="text" floatingLabel required label="Âge" ngControl="age">
+                <!--[errorMsg]="f.form.controls['age'].valid?'':'age incorrect'"-->
+                <!--[numericValue]="getModelValue('age')"-->
+                <!--(numericValueChange)="updateModel('age', $event)"-->
+                <!--[numericValue]="getModelValue('age')"-->
+                <!--[inputText]="getModelValue('age')"-->
+                <!--pattern="[0-9]*"-->
+                <!--[numericValue]=""-->
+            </material-input>
+            <div [hidden]="f.form.controls['age'].valid">Erreurs : {{f.form.controls['age'].errors.toString()}}</div>
+        </div>
+        <div>
+            Genre
+
+            <material-radio-group (selectedChange)="updateModel('genre',$event)">
+                <material-radio value="1"
+                                [checked]="f.form.controls['genre'].value == 1"
+                >Femme
+                </material-radio>
+                <material-radio value="2"
+                                [checked]="f.form.controls['genre'].value == 2"
+                >Homme
+                </material-radio>
+
+            </material-radio-group>
+        </div>
+
+        <div>
+
+            <material-toggle label="Recevoir newsletter" color="blue-grey"
+                             [checked]="f.form.controls['newsletter'].value"
+                             (checkedChange)="updateModel('newsletter',$event)"
+            ></material-toggle>
+        </div>
+
+        <material-button raised class="blue" type="submit" [disabled]="!f.form.valid"
+                         (click)="onSubmit()"
+        >
+            <glyph icon="check"></glyph>
+            Valider
+        </material-button>
+    </form>
+</div>