Как предотвратить появление проверки при инициализации для angular2-dart и angular2-forms

Я искренне пытаюсь изучить 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;
  }
}

Когда компонент запущен, ввод имени уже показывает недопустимый статус. Как лучше всего этого избежать. Я бы предпочел, чтобы проверка не показывалась изначально, а после получения фокуса.

Привет, Тедди


person st_clair_clarke    schedule 01.01.2016    source источник


Ответы (1)


На самом деле вы должны использовать состояние формы и, в частности, атрибуты touched и pristine. Чтобы получить доступ к состоянию определенного поля, просто используйте ngControl и создайте соответствующую локальную переменную (с #). Затем вы можете использовать переменную (то есть состояние поля формы), чтобы проверить, было ли оно обновлено или затронуто.

Вот атрибуты, которые будут соответствовать вашим потребностям:

untouched Истинно, если элемент управления еще не потерял фокус.

touched Истинно, если элемент управления потерял фокус.

pristine Истинно, если пользователь еще не взаимодействовал с элементом управления.

dirty Истинно, если пользователь уже взаимодействовал с элементом управления.

Более подробную информацию о формах см. в этом документе на angular.io: https://angular.io/docs/ts/latest/guide/forms.html.

Надеюсь, это поможет вам, Тьерри.

person Thierry Templier    schedule 01.01.2016