Angular2 RC - кнопка отключения устранения неполадок

это мой первый вопрос здесь, поэтому, пожалуйста, скажите мне, если я сделал что-то не так, чтобы я мог это исправить :)

У меня возникла проблема с корректной работой тега [diabled] на кнопке в моей форме.

вот мой шаблон:

<form #loginForm="ngForm">
      <label class="omwave">Identifiant</label>
      <input type="text" class="omwave" [(ngModel)]="login" placeholder="Identifiant" name="login" required>
      <label class="omwave">Mot de passe</label>
      <div class="input-group omwave">
        <input type="password" class="input-group-field omwave" [(ngModel)]="password" placeholder="Mot de passe" name="password" required>
        <div class="input-group-button">
          <button type="submit" (click)="goLogin()" value="submit" class="" [disabled]="!isValid"><img width="25px" src="imgs/start_service.png" alt="login_button"></button>
        </div>
      </div>
    </form>

И вот мой компонент:

import {Component} from '@angular/core';
import {FORM_DIRECTIVES, NG_VALIDATORS, Validators, Control} from "@angular/common";

@Component({
  selector: 'login',
  templateUrl: 'app/core/templates/login.html',
  directives: [FORM_DIRECTIVES]
})

export class LoginComponent {
  protected login: string;
  protected password: string;

  constructor() {

  }
}

Когда мои два входных логина и пароля пусты, у них есть свойство ng-invalid, и кнопка отключена. Но если я заполню входные данные, они получат свойство ng-valid, но моя кнопка все еще будет отключена, и я не знаю, почему, потому что форма действительна при заполнении входных данных. Если у кого-то есть идея, пожалуйста :) Если вам нужна какая-либо другая информация, я постараюсь ответить на нее.

Спасибо за чтение.

С уважением,


angular angular2-forms disabled-input
person Mokette    schedule 29.06.2016    source источник
comment
вы не можете отключить кнопку отправки на isValid. Скорее вы можете сделать проверку form.dirty.... Почему даже одно изменение в поле делает форму грязной... но после изменения пользователь должен знать проверки в текущей форме   -  person mayur    schedule 29.06.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я бы использовал следующее на основе встроенной поддержки формы Angular2:

<form #loginForm="ngForm">
  <label class="omwave">Identifiant</label>
  <input type="text" class="omwave" [(ngModel)]="login" 
         placeholder="Identifiant" name="login"
         ngControl="name" required> <--------
  <label class="omwave">Mot de passe</label>
  <div class="input-group omwave">
    <input type="password" class="input-group-field omwave" 
         [(ngModel)]="password" placeholder="Mot de passe"
         ngControl="password" name="password" required> <-------
    <div class="input-group-button">
      <button type="submit" (click)="goLogin()" value="submit" 
          class="" [disabled]="!loginForm.valid"> <------
        <img width="25px" src="imgs/start_service.png" alt="login_button">
      </button>
    </div>
  </div>
</form>

В вашем случае я не знаю, как обрабатывается свойство isValid и чему оно соответствует. Вы можете напрямую полагаться на состояние формы (loginForm) и его свойство valid.

person Thierry Templier    schedule 29.06.2016
comment
Большое спасибо Тьерри! :) Добавление [ngControl]=login и [ngControl]=password к моим входам и переключение [disabled]=!isValid на [disabled]=!loginForm.valid заставляют его работать действительно хорошо! - person Mokette; 29.06.2016

arrow_upward
0
arrow_downward

Я думаю, это сработает,

<button type="submit" (click)="goLogin()" value="submit" class="" [disabled]="!loginForm.form.valid"><img width="25px" src="imgs/start_service.png" alt="login_button"></button>
person micronyks    schedule 29.06.2016
comment
к сожалению, нет микрониксов, я пробовал это, потому что видел это в другом посте, но не работает: с - person Mokette; 29.06.2016