Dart Example

Just another WordPress site

AngularDart

AngularDart v4 form validation

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';

class User {
  String name;
  String email;

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

@Component(
  selector: 'my-app',
    styles: const ['''
    .ng-valid.ng-dirty {
      border-left: 5px solid lightgreen;
    }
    .ng-invalid.ng-dirty {
      border-left: 5px solid lightpink;
    }
    .form-invalid { background-color: lightpink; }
    .form-valid { background-color: lightgreen; }
    form { padding: 10px;}
  '''],
  template: '''
<div [hidden]="submitted">
<form (ngSubmit)="onSubmit()" #userForm="ngForm" novalidate
  [ngClass]="userForm.form.valid ? 'form-valid' : 'form-invalid'">
<div class="well">
  <div class="form-group">
    <label>Member ID</label>
    <input type="text" class="form-control" required
      [(ngModel)]="master.name" #v_name="ngForm"
      minlength="5" maxlength="10" pattern="[A-Z0-9]+" ngControl="name" />
    <div *ngIf="v_name.dirty && !v_name.valid">
      <span class="text-danger"
        [hidden]="!v_name.errors.containsKey('required')">
        This is a required field</span><br />
      <span class="text-danger"
        [hidden]="v_name.errors.containsKey('minlength')">
        Minimum length required is 5</span><br />
      <span class="text-danger"
        [hidden]="v_name.errors.containsKey('maxlength')">
        Max length required is 10</span><br />
      <span class="text-danger"
        [hidden]="v_name.errors.containsKey('pattern')">
        Only uppercase letter,digit</span><br />
    </div>
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" required
      [(ngModel)]="master.email" #v_email="ngForm"
      pattern="[A-Za-z0-9.\-]+@[A-Za-z0-9\-]+[.][A-Za-z0-9.\-]+" ngControl="email" />
    <div *ngIf="v_email.dirty && !v_email.valid">
      <span class="text-danger"
        [hidden]="!v_email.errors.containsKey('required')">
        This is a required field</span><br />
      <span class="text-danger"
        [hidden]="!v_email.errors.containsKey('pattern')">
        Enter a valid email address</span><br />
    </div>
  </div>
  <div class="text-center">
    <button type="submit" class="btn btn-primary"
        [disabled]="!userForm.form.valid">Submit</button>
  </div>
</div>
</form>
</div>

<div class="well" *ngIf="submitted">
  <strong>You submitted the following</strong><br />
  <span>Member ID:{{ master.name}}</span><br />
  <span>Email:{{ master.email}}</span><br />
</div>
    ''',
  directives: const [CORE_DIRECTIVES, formDirectives],
  pipes: const [COMMON_PIPES]
)
class AppComponent {
  User master = new User("member id","email");
  bool submitted = false;
  void onSubmit(){
    submitted = true;
  }
}

void main() {
  bootstrap(AppComponent);
}