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

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

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

Angular2는 Submit 버튼에서 사용할 수 있는 ng-disabled에 해당합니까?(NG-장애인은 저에게 적합하지 않습니다.)

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

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

각 2.x.x, 4, 5...

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

.tg.

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;

다음은 작업 예제입니다(컨트롤러에 submit() 메서드가 있다는 것을 신뢰해야 합니다. 입력 필드에 'abc'가 입력된 경우 {user: 'abc'}와 같은 개체가 인쇄됩니다.).

<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와 함께 작동합니다.
• 제출()에 올바른 값을 전달하려면 입력 요소에 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>

이 플런커에서 데모 확인

추가 정보

이것은 저에게 효과가 있었습니다.

.ts

newForm : FormGroup;

.tg.

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

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

 <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>

언급URL : https://stackoverflow.com/questions/32062051/how-to-make-submit-button-disabled