Я искренне пытаюсь изучить angular2-dart с момента его бета-версии. У меня есть форма со следующим кодом:
HTML
<div class = "container">
<div [hidden] = "isSubmitted">
<h1>Hero Form</h1>
<div class="md-button"><ng-content></ng-content></div>
<form (ngSubmit) = "onSubmit()"
#heroForm = "ngForm">
{{diagnostic}}
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text"
class = "form-control"
required
[(ngModel)] = "model.name"
ngControl = "name"
#name = "ngForm"
#spy>
<p [hidden] = "name.valid"
class = "alert alert-danger">
Name is required
</p>
TODO: remove this: {{spy.className}}
</div>
<div class = "form-group">
<label for = "alterEgo">Alter Ego</label>
<input type = "text"
class = "form-control"
[(ngModel)] = "model.alterEgo"
ngControl = "alterEgo">
</div>
<div class = "form-group">
<label for = "power">Hero Power</label>
<select class = "form-control"
required
[(ngModel)] = "model.power"
ngControl = "power">
<option *ngFor = "#p of powers"
[value] = "p">{{p}}
</option>
</select>
</div>
<button type = "submit"
class = "btn btn-default"
[disabled] = "!heroForm.form.valid">Submit
</button>
</form>
</div>
.дротик
library hero_form.hero_form_component;
import 'package:angular2/angular2.dart';
import 'package:angular2_forms/hero.dart';
import 'package:jsonx/jsonx.dart';
//import 'package:angular2_material/src/components/input/input.dart';
//import 'package:angular2_material/src/components/button/button.dart';
const List<String> _powers = const [
'Really Smart',
'Super Flexible',
'Super Hot',
'Weather Changer'
];
bool isDevelopment = true;
@Component(
selector: 'hero-form',
templateUrl: 'hero_form_component.html',
// Soon specifying directives here will be unnecessary.
directives: const [CORE_DIRECTIVES, FORM_DIRECTIVES] )
class HeroFormComponent {
List<String> get powers => _powers;
bool isSubmitted = false;
Hero model = new Hero( 18, '', _powers[0], 'Chuck Overstreet' );
// TODO: Remove this when we're done
String get diagnostic
{
if(isDevelopment)
{
return 'DIAGNOSTIC: ${encode(model, indent: ' ')}';
}
return '';
}
onSubmit( ) {
// use isSubmitted to to validate and publish instance
isSubmitted = true;
}
}
Когда компонент запущен, ввод имени уже показывает недопустимый статус. Как лучше всего этого избежать. Я бы предпочел, чтобы проверка не показывалась изначально, а после получения фокуса.
Привет, Тедди