양식이 유효 할 때까지 “제출”버튼을 비활성화하는 방법은 무엇입니까?
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>
