2

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

组件运行时，名称输入已经显示无效状态。避免这种情况的最佳做法是什么。我宁愿最初不显示验证，而是在获得焦点之后显示。

干杯，泰迪

4

2 回答 2

1

这可能是最简单的：

<input type = "text"
               class = "form-control"
               required
               [(ngModel)] = "model.name"
               ngControl = "name"
               #name = "ngForm"
               #spy>
        <p [hidden] = "name.valid || name.pristine"
           class = "alert alert-danger">
          Name is required
        </p>

于 2016-01-01T19:20:38.093 回答
0

事实上，您应该利用表单的状态，尤其是属性touched和pristine. 要访问特定字段的状态，只需利用ngControl并创建相应的局部变量（使用 a #）。然后您可以使用该变量（即表单域的状态）来检查它是否已被更新或触摸。

以下是适合您需求的属性：

untouched如果控制还没有失去焦点，则为真。

touched如果控制失去焦点，则为真。

pristine如果用户尚未与控件交互，则为真。

dirty如果用户已经与控件交互，则为真。

有关更多详细信息，请参阅 angular.io 上的此文档：https ://angular.io/docs/ts/latest/guide/forms.html 。

希望它可以帮助你，蒂埃里

于 2016-01-01T20:30:06.930 回答