Отключите кнопку, когда поля пустые в Angular5 [неверная форма]

Question

Я изучаю Angular5, новичок в этом.

У меня есть два поля ввода, одна кнопка.Обработанные проверки для этих двух полей, активирует кнопку после ввода двух полей.Я отключил кнопку, когда форма недействительна.Но это не работает.

<form class="customerRegisteration-form">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

Пожалуйста, помогите мне, если что-то не так.

Заранее спасибо.

Answer 1

Вы можете просто добавить #customerRegisteration="ngForm" в свой тег, как показано ниже

<form class="customerRegisteration-form" #customerRegisteration="ngForm">  

Полный код

<form class="customerRegisteration-form" #customerRegisteration="ngForm">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

Примечание.Предлагаю вам прочитать статью "Угловые формы" , а также у вас много вопросов по поводу угловых форм

Answer 2

Ваша форма должна иметь форму группы как

<form  [formGroup]="customerRegisteration">

или

 <form class="customerRegisteration-form" #customerRegisteration="ngForm">

, а затем

<button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">