\r\n\r\n
\r\n(html)\r\n<head>\r\n.....\r\n <script defer src=\"main.dart\" type=\"application\/dart\"><\/script>\r\n <script defer src=\"packages\/browser\/dart.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <my-app>Loading...<\/my-app>\r\n<\/body>\r\n\r\n(pubspec.yaml)\r\n.....\r\nenvironment:\r\n sdk: '>=1.24.0 <2.0.0'\r\ndependencies:\r\n angular: ^4.0.0\r\n angular_forms: ^1.0.0\r\n angular_router: ^1.0.2\r\n http: ^0.11.0\r\n stream_transform: ^0.0.6\r\n\r\ndev_dependencies:\r\n angular_test: ^1.0.0\r\n browser: ^0.10.0\r\n dart_to_js_script_rewriter: ^1.0.1\r\n mockito: ^2.0.2\r\n test: ^0.12.21\r\n\r\ntransformers:\r\n- angular:\r\n entry_points:\r\n - web\/main.dart\r\n - test\/**_test.dart\r\n- test\/pub_serve:\r\n $include: test\/**_test.dart\r\n- dart_to_js_script_rewriter\r\n<\/pre>\r\n <\/div>\r\n\r\n \r\n
\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_forms\/angular_forms.dart';\r\n\r\nzipValidator(AbstractControl zip) {\r\n var reg = new RegExp(r'^\\d{7}$');\r\n var valid = reg.hasMatch(zip.value);\r\n if(zip.value == \"\" || valid) {\r\n return null;\r\n } else {\r\n return {\"invalidZip\":true};\r\n }\r\n}\r\n\r\nclass User {\r\n String name;\r\n String email;\r\n String zip;\r\n\r\n User(this.name,this.email,this.zip);\r\n}\r\n\r\n@Component(\r\n selector: 'my-app',\r\n styles: const ['''\r\n form.ng-invalid.ng-dirty { background-color: lightpink; }\r\n form.ng-valid.ng-dirty { background-color: lightgreen; }\r\n .ng-valid {\r\n border-left: 5px solid lightgreen;\r\n }\r\n .ng-invalid {\r\n border-left: 5px solid lightpink;\r\n }\r\n form { padding: 10px;}\r\n '''],\r\n template: '''\r\n<form (ngSubmit)=\"onSubmit(myForm.value)\" [ngFormModel]=\"myForm\" novalidate>\r\n<div class=\"well\">\r\n <div class=\"form-group\">\r\n <label>Member ID<\/label>\r\n <input type=\"text\" class=\"form-control\" ngControl=\"user_name\" \/>\r\n <div *ngIf=\"myForm.controls['user_name'].dirty &&\r\n !myForm.controls['user_name'].valid\">\r\n <span class=\"text-danger\"\r\n [hidden]=\"!myForm.controls['user_name'].errors.containsKey('required')\">\r\n This is a required field<\/span>\r\n <span class=\"text-danger\"\r\n [hidden]=\"!myForm.controls['user_name'].errors.containsKey('minlength')\">\r\n Minimum length required is 5<\/span>\r\n <span class=\"text-danger\"\r\n [hidden]=\"!myForm.controls['user_name'].errors.containsKey('maxlength')\">\r\n Max length required is 10<\/span>\r\n <span class=\"text-danger\"\r\n [hidden]=\"!myForm.controls['user_name'].errors.containsKey('pattern')\">\r\n Only uppercase letter,digit<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Email<\/label>\r\n <input type=\"email\" class=\"form-control\" ngControl=\"user_email\" \/>\r\n <div *ngIf=\"myForm.controls['user_email'].dirty && \r\n !myForm.controls['user_email'].valid\">\r\n <span class=\"text-danger\"\r\n [hidden]=\"!myForm.controls['user_email'].errors.containsKey('required')\">\r\n This is a required field<\/span>\r\n <span class=\"text-danger\"\r\n [hidden]=\"!myForm.controls['user_email'].errors.containsKey('pattern')\">\r\n Enter a valid email address<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Zip code(7-digit number,excluding hyphen)<\/label>\r\n <input type=\"text\" class=\"form-control\" ngControl=\"user_zip\" \/>\r\n <div *ngIf=\"myForm.controls['user_zip'].dirty && \r\n !myForm.controls['user_zip'].valid\">\r\n <span class=\"text-danger\"\r\n [hidden]=\"!myForm.controls['user_zip'].errors.containsKey('invalidZip')\">\r\n 7-digit number,excluding hyphen<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <button type=\"submit\" class=\"btn btn-primary\"\r\n [disabled]=\"!myForm.valid\">Submit<\/button>\r\n <\/div>\r\n<\/div>\r\n<\/form>\r\n\r\n<div class=\"well\" *ngIf=\"submitted\">\r\n <strong>You submitted the following<\/strong><br \/>\r\n <span>{{ master | json }}<\/span>\r\n<\/div>\r\n ''',\r\n directives: const [CORE_DIRECTIVES, formDirectives],\r\n pipes: const [COMMON_PIPES],\r\n viewProviders: const [FORM_BINDINGS]\r\n)\r\nclass AppComponent {\r\n var master;\r\n bool submitted = false;\r\n ControlGroup myForm;\r\n\r\n AppComponent() {\r\n final fb = new FormBuilder();\r\n myForm = fb.group({\r\n \"user_name\": ['A1234', Validators.compose([\r\n Validators.required,\r\n Validators.minLength(5),\r\n Validators.maxLength(10),\r\n Validators.pattern('[A-Z0-9]+')])],\r\n \"user_email\": ['test@example.com',Validators.compose([\r\n Validators.required,\r\n Validators.pattern('[A-Za-z0-9.\\-]+@[A-Za-z0-9\\-]+[.][A-Za-z0-9.\\-]+')])],\r\n \"user_zip\": ['1234567', Validators.compose([zipValidator])]\r\n });\r\n }\r\n void onSubmit(user){\r\n master = user;\r\n submitted = true;\r\n }\r\n}\r\n\r\nvoid main() {\r\n bootstrap(AppComponent);\r\n}\r\n<\/pre>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n