จะปิดการใช้งานปุ่ม 'ส่ง' ได้อย่างไร?

จะปิดการใช้งานปุ่ม "ส่ง" จนกว่าแบบฟอร์มจะถูกต้องได้อย่างไร?

angular2 มีคุณสมบัติเทียบเท่ากับ ng-disabled ที่สามารถใช้กับปุ่มส่งได้หรือไม่ (ng-disabled ไม่ได้ผลสำหรับฉัน)

ดังที่เห็นในตัวอย่าง Angular นี้มีวิธีปิดการใช้งานปุ่มจนกว่ารูปแบบทั้งหมดจะถูกต้อง:

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

ในAngular 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 () บนคอนโทรลเลอร์ - มันพิมพ์ Object เช่น {user: 'abc'} ถ้าป้อน '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>

ตรวจสอบตัวแปลงนี้สำหรับการสาธิต

ข้อมูลเพิ่มเติม

สิ่งสำคัญคือคุณต้องใส่คีย์เวิร์ดที่ " จำเป็น " ไว้ในแท็กอินพุตที่จำเป็นแต่ละแท็กเพื่อให้สามารถใช้งานได้

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