어떻게 입력 상자가 비어 있고 필드가 채워 졌을 때 버튼을 비활성화합니까?

Question

사용자가 입력 필드를 채우지 않은 경우 버튼을 비활성화하고 싶습니다. "(name.value.length === 0 || email.value.length === 0)"조건을 추가하여로드시 버튼을 비활성화하지만 텍스트 필드에 값을 입력하면 비활성화 됨이 제거되지 않음

<section class="container col-md-12 col-md-offset-3"> 
     <h1>Add Users</h1> 
     <form class="form-inline"> 
     <div class="form-group"> 
      <label for="exampleInputName2">Name</label> 
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" #name> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputEmail2">Email</label> 
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" #email> 
     </div> 
     <button type="submit" [disabled]="(name.value.length === 0 || email.value.length === 0)" class="btn btn-default" (click)="getValues($event, name, email)">Add Data</button> 
     </form> 
    </section> 
    <section class="container"> 
     <h3>Users Details</h3> 
     <table class="table"> 
     <thead> 
      <tr> 
      <th class="col-md-6">Name</th> 
      <th class="col-md-6">Email</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let data of dataArr"> 
      <td>{{data.name}}</td> 
      <td>{{data.email}}</td> 
      </tr> 
     </tbody> 
     </table> 
    </section> 

Answer 1

양방향 데이터 바인딩을 사용할 수 있습니다. 예 :

<input type="text" class="form-control" [(ngModel)]="userName"> 

이하에서는 userName (이 경우 int) 버튼이 비어 있습니다.

<button class ="btn btn-primary" [disabled]="userName === ''>Enter name</button> 

코드에 맞게 조정하면 효과가 있습니다.