Dart Example

Just another WordPress site

AngularDart

AngularDart v4 custom form,FormBuilder

AngularDart v4 Sample Code,Demo
  • AngularDart : 4.0.0
  • Dart : 1.24.1
Loading… 
(html)
<head>
.....
  <script defer src="main.dart" type="application/dart"></script>
  <script defer src="packages/browser/dart.js"></script>
</head>
<body>
  <my-app>Loading...</my-app>
</body>

(pubspec.yaml)
.....
environment:
  sdk: '>=1.24.0 <2.0.0'
dependencies:
  angular: ^4.0.0
  angular_forms: ^1.0.0
  angular_router: ^1.0.2
  http: ^0.11.0
  stream_transform: ^0.0.6

dev_dependencies:
  angular_test: ^1.0.0
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  mockito: ^2.0.2
  test: ^0.12.21

transformers:
- angular:
    entry_points:
    - web/main.dart
    - test/**_test.dart
- test/pub_serve:
    $include: test/**_test.dart
- dart_to_js_script_rewriter

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

zipValidator(AbstractControl zip) {
  var reg = new RegExp(r'^\d{7}$');
  var valid = reg.hasMatch(zip.value);
  if(zip.value == "" || valid) {
    return null;
  } else {
    return {"invalidZip":true};
  }
}

class User {
  String name;
  String email;
  String zip;

  User(this.name,this.email,this.zip);
}

@Component(
  selector: 'my-app',
    styles: const ['''
    form.ng-invalid.ng-dirty { background-color: lightpink; }
    form.ng-valid.ng-dirty { background-color: lightgreen; }
    .ng-valid {
      border-left: 5px solid lightgreen;
    }
    .ng-invalid {
      border-left: 5px solid lightpink;
    }
    form { padding: 10px;}
  '''],
  template: '''
<form (ngSubmit)="onSubmit(myForm.value)" [ngFormModel]="myForm" novalidate>
<div class="well">
  <div class="form-group">
    <label>Member ID</label>
    <input type="text" class="form-control" ngControl="user_name" />
    <div *ngIf="myForm.controls['user_name'].dirty &&
                !myForm.controls['user_name'].valid">
      <span class="text-danger"
        [hidden]="!myForm.controls['user_name'].errors.containsKey('required')">
        This is a required field</span>
      <span class="text-danger"
        [hidden]="!myForm.controls['user_name'].errors.containsKey('minlength')">
        Minimum length required is 5</span>
      <span class="text-danger"
        [hidden]="!myForm.controls['user_name'].errors.containsKey('maxlength')">
        Max length required is 10</span>
      <span class="text-danger"
        [hidden]="!myForm.controls['user_name'].errors.containsKey('pattern')">
        Only uppercase letter,digit</span>
    </div>
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" ngControl="user_email" />
    <div *ngIf="myForm.controls['user_email'].dirty && 
                !myForm.controls['user_email'].valid">
      <span class="text-danger"
        [hidden]="!myForm.controls['user_email'].errors.containsKey('required')">
        This is a required field</span>
      <span class="text-danger"
        [hidden]="!myForm.controls['user_email'].errors.containsKey('pattern')">
        Enter a valid email address</span>
    </div>
  </div>
  <div class="form-group">
    <label>Zip code(7-digit number,excluding hyphen)</label>
    <input type="text" class="form-control" ngControl="user_zip" />
    <div *ngIf="myForm.controls['user_zip'].dirty && 
                !myForm.controls['user_zip'].valid">
      <span class="text-danger"
        [hidden]="!myForm.controls['user_zip'].errors.containsKey('invalidZip')">
        7-digit number,excluding hyphen</span>
    </div>
  </div>
  <div class="text-center">
    <button type="submit" class="btn btn-primary"
        [disabled]="!myForm.valid">Submit</button>
  </div>
</div>
</form>

<div class="well" *ngIf="submitted">
  <strong>You submitted the following</strong><br />
  <span>{{ master | json }}</span>
</div>
    ''',
  directives: const [CORE_DIRECTIVES, formDirectives],
  pipes: const [COMMON_PIPES],
  viewProviders: const [FORM_BINDINGS]
)
class AppComponent {
  var master;
  bool submitted = false;
  ControlGroup myForm;

  AppComponent() {
    final fb = new FormBuilder();
    myForm = fb.group({
      "user_name": ['A1234', Validators.compose([
         Validators.required,
         Validators.minLength(5),
         Validators.maxLength(10),
         Validators.pattern('[A-Z0-9]+')])],
      "user_email": ['test@example.com',Validators.compose([
         Validators.required,
         Validators.pattern('[A-Za-z0-9.\-]+@[A-Za-z0-9\-]+[.][A-Za-z0-9.\-]+')])],
      "user_zip": ['1234567', Validators.compose([zipValidator])]
    });
  }
  void onSubmit(user){
    master = user;
    submitted = true;
  }
}

void main() {
  bootstrap(AppComponent);
}