web-dev-qa-db-ja.com

Angular 2フォーム - 送信ボタンが無効になっていますか？

フォームが有効になるまで、送信ボタンを無効にする必要がありますか？ベストプラクティス？

Angular 2には、Submitボタンで使用できるng-disabledと同等のものがありますか。 （ng-disabledはうまくいきません。）

formsangular
107
Bonneville

ここで の例 を参照してください。Angular 2では、フォーム全体が有効になるまでボタンを無効にする方法です。

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

inAngular 2.xx、4、5...

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

これは実用的な例です（コントローラに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（）に正しい値を渡したい場合、input要素はnameとngModel属性を持つべきです

また、これは、新しいFormBuilderを使用していないときにもおすすめです。 FormBuilderを使用する場合、状況は大きく異なります。

2
user1738579

フォームの検証は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>

このプランカーでデモをチェックしてください

詳しい情報

2
Prashobh

それが機能するためには、必須の入力タグのそれぞれに "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>
1
Emir Memic

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;
1
alvic

これは私のために働きました。

.ts

newForm : FormGroup;

.html

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

以下のコードが役に立つことがあります：

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