Я серьезно пытаюсь изучить angular2-dart, начиная с его бета-версии. У меня есть форма со следующим кодом:

html

Hero Form

{{diagnostic}}

Name is required

TODO: remove this: {{spy.className}}

.dart

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

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

Приветствуем, Тедди

st_clair_clarke

Ответов: 2

Ответы (2)

Вероятно, это было бы проще всего:


        

Имя обязательно

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

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

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

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

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

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

Для получения более подробной информации см. этот документ на angular.io, касающийся форм: https://angular.io/docs/ts/latest/guide/forms.html.

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

2022 WebDevInsider