'제출'버튼을 비활성화하는 방법은 무엇입니까?

양식이 유효 할 때까지 "제출"버튼을 비활성화하는 방법은 무엇입니까?

angular2에는 제출 버튼에서 사용할 수있는 ng-disabled와 동등한 기능이 있습니까? (ng-disabled는 나를 위해 작동하지 않습니다.)

이 Angular 예제 에서 볼 수 있듯이 전체 양식이 유효 할 때까지 버튼을 비활성화하는 방법이 있습니다.

<button type="submit" [disabled]="!ngForm.valid">Submit</button>

의 각도 2.XX , 4 , 5 ...

<form #loginForm="ngForm">
    <input type="text" required> 
    <button  type="submit"  [disabled]="loginForm.form.invalid">Submit</button>
</form>

.html

<form [formGroup]="contactForm">

<button [disabled]="contactForm.invalid"  (click)="onSubmit()">SEND</button>

.ts

contactForm: FormGroup;

다음은 작동하는 예제입니다 (컨트롤러에 submit () 메서드가 있다는 것을 믿어야합니다. 입력 필드에 'abc'를 입력하면 {user : 'abc'}와 같은 Object를 인쇄합니다) :

<form #loginForm="ngForm" (ngSubmit)="submit(loginForm.value)">
    <input type="text" name="user" ngModel required>
    <button  type="submit"  [disabled]="loginForm.invalid">
        Submit
    </button>
</form>

보시다시피 :

• loginForm.form을 사용하지 말고 loginForm 만 사용하십시오.
• loginForm.invalid는! loginForm.valid와 함께 작동합니다.
• submit ()에 올바른 값을 전달하려면 입력 요소에 name 및 ngModel 속성이 있어야합니다.

또한 이것은 내가 추천하는 새로운 FormBuilder를 사용하지 않을 때입니다. FormBuilder를 사용할 때는 상황이 매우 다릅니다.

양식 유효성 검사는 Angular 2에서 매우 간단합니다.

여기에 예가 있습니다.

<form (ngSubmit)="onSubmit()" #myForm="ngForm">

 <div class="form-group">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname" 
   required [(ngModel)]="firstname" name="firstname">
 </div>

 <div class="form-group">
  <label for="middlename">Middle Name</label>
  <input type="text"  class="form-control" id="middlename" 
   [(ngModel)]="middlename" name="middlename">
 </div>

 <div class="form-group">
  <label for="lastname">Last Name</label>
  <input type="text"  class="form-control" id="lastname" 
   required minlength = '2' maxlength="6" [(ngModel)] = "lastname" name="lastname">
 </div>

 <div class="form-group">
  <label for="mobnumber">Mob Number</label>
  <input type="text"  class="form-control" id="mobnumber"  
   minlength = '2' maxlength="10" pattern="^[0-9()\-+\s]+$" 
   [(ngModel)] = "mobnumber" name="mobnumber">
 </div>

 <button type="submit" [disabled]="!myForm.form.valid">Submit</button>

</form>

데모를 위해이 플 런커를 확인하십시오.

더 많은 정보

작동하려면 필수 입력 태그 각각에 " required "키워드 를 포함하는 것이 중요합니다 .

 <form (ngSubmit)="login(loginForm.value)" #loginForm="ngForm">
    ...
    <input ngModel required name="username" id="userName" type="text" class="form-control" placeholder="User Name..." />
    <button type="submit" [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>

아래 코드가 도움이 될 수 있습니다.

<button type="submit" [attr.disabled]="!ngForm.valid ? true : null">Submit</button>

이것은 나를 위해 일했습니다.

.ts

newForm : FormGroup;

.html

<input type="button" [disabled]="newForm.invalid" />