'सबमिट' बटन को कैसे निष्क्रिय करें?

Question

"वैध" बटन को कैसे अक्षम करें जब तक कि फॉर्म वैध न हो?

क्या angular2 में ng- अक्षम के बराबर है जिसे सबमिट बटन पर उपयोग किया जा सकता है? (एनजी-अक्षम मेरे लिए काम नहीं करता है।)

Comments

केवल जब आप आवक सत्यापन का उपयोग करते हैं, उदाहरण के लिए टाइपिंग पर। यह मत करो .. केवल अच्छे विचार के साथ या अतुल्यकालिक मान्यता के साथ, जो उदाहरण के लिए बैकएंड पर निर्भर करता है।

— सैम क्लोएबरघ्स

Answer 1

जैसा कि इस कोणीय उदाहरण में देखा गया है , एक बटन को निष्क्रिय करने का एक तरीका है जब तक कि पूरा फॉर्म मान्य न हो:

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

Comments

कैसे फार्म का उपयोग करके रेडियो और चेकबॉक्स का मूल्य प्राप्त करें?

— परदीप जैन

संदर्भित लिंक में उदाहरण के लिए angular2 के लिए पुराना सिंटैक्स है ng-form-modal। उसे थैंक्स अपडेट करने के लिए कहें।

— परदीप जैन

इस उदाहरण की जाँच करें, वाक्य विन्यास अप टू डेट है -> blog.jhades.org/…

— कोणीय विश्वविद्यालय

यदि आप सबमिट बटन को अक्षम करते हैं (जब तक आप इसे प्रवाह पर नहीं करते हैं लेकिन मैं हमेशा ऐसा नहीं करता हूं) तो आप किसी फॉर्म को कैसे सत्यापित कर सकते हैं? कृपया यहाँ UX चिंताओं के बारे में पता करें ..

— सैम Vloeberghs

[विकलांग] = "ngForm.invalid" आप भी देख सकते हैं

— shaunak1111

Answer 2

में कोणीय 2.xx , 4 , 5 ...

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

Answer 3

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह समस्या का हल कैसे और / या इसके बारे में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा।

— निक 3500

Answer 4

यहां एक कार्यशील उदाहरण दिया गया है (आपको मुझ पर भरोसा करना होगा कि नियंत्रक पर एक सबमिट () विधि है - यह ऑब्जेक्ट को प्रिंट करता है, जैसे {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
• यदि आप सबमिट करना चाहते हैं () सही मूल्य (नों) को पारित किया जाना चाहिए, तो इनपुट तत्व में नाम और एनकोडेल विशेषताएं होनी चाहिए

इसके अलावा, यह तब होता है जब आप नए फॉर्मब्यूलर का उपयोग नहीं कर रहे होते हैं, जो मैं सुझाता हूं। FormBuilder का उपयोग करते समय चीजें बहुत भिन्न होती हैं।

Answer 5

फॉर्म वैलिडेशन एंगुलर 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>

डेमो के लिए इस प्लंकर की जाँच करें

और जानकारी

Answer 6

यह महत्वपूर्ण है कि आप काम करने के लिए अपने अनिवार्य इनपुट टैग में से प्रत्येक के अंदर " आवश्यक " कीवर्ड शामिल करें।

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

Answer 7

नीचे हो सकता है कोड मदद कर सकता है:

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

Answer 8

इसने मेरे लिए काम किया।

.ts

newForm : FormGroup;

.html

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