- 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
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);
}