কীভাবে 'সাবমিট' বাটন অক্ষম করবেন?

Question

ফর্মটি বৈধ না হওয়া পর্যন্ত কীভাবে "জমা দিন" বোতামটি অক্ষম করবেন?

কৌণিক 2 এর কী এনজি-অক্ষম সমতুল্য যা জমা বোতামে ব্যবহার করা যেতে পারে? (এনজিও-অক্ষম আমার পক্ষে কাজ করে না))

Comments

আপনি যখন অন্তর্বতীকরণের বৈধতা ব্যবহার করেন কেবলমাত্র টাইপিংয়ের ক্ষেত্রে। এটি করবেন না .. কেবলমাত্র ভাল চিন্তা বা অ্যাসিক্রোনাস বৈধতার সাথে, এটি উদাহরণস্বরূপ ব্যাকএন্ডের উপর নির্ভর করে।

— স্যাম ভ্লোবার্গস

Answer 1

এই কৌণিক উদাহরণে দেখা গেছে , পুরো ফর্মটি বৈধ না হওয়া পর্যন্ত একটি বোতাম অক্ষম করার একটি উপায় রয়েছে:

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

Comments

ফর্ম বিল্ডার ব্যবহার করে কীভাবে রেডিও এবং চেকবক্সের মান পাবেন?

— পারদীপ জৈন

উল্লিখিত লিঙ্কটিতে উদাহরণস্বরূপ কৌণিক 2 এর জন্য পুরানো বাক্য গঠন রয়েছে ng-form-modal। তাকে থ্যাঙ্কস আপডেট করতে বলুন।

— পারদীপ জৈন

এই উদাহরণটি দেখুন, সিনট্যাক্সটি আপ টু ডেট -> ব্লগ.জাদেস.আর.২

— কৌণিক বিশ্ববিদ্যালয়

আপনি যদি সাবমিট বাটনটি অক্ষম করেন তবে আপনি কীভাবে কোনও ফর্ম যাচাই করতে পারবেন (যদি না আপনি প্রবাহে এটি না করেন তবে আমি সর্বদা এটি পছন্দ করি না) দয়া করে এখানে ইউএক্স উদ্বেগ সম্পর্কে সচেতন থাকুন ..

— স্যাম ভ্লোবার্গস

[অক্ষম] = "এনজিফর্ম ইন্ডিয়ালিড" আপনিও চেক করতে পারেন

— 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

এখানে একটি কার্যকারী উদাহরণ রয়েছে (আপনারা আমাকে বিশ্বাস করতে হবে যে কন্ট্রোলারে একটি জমা দেওয়ার পদ্ধতি রয়েছে) - এটি একটি অবজেক্ট প্রিন্ট করে like ব্যবহারকারীর মতো: 'এবিসি'} যদি 'অ্যাবসি' ইনপুট ক্ষেত্রে প্রবেশ করানো হয়):

<form #loginForm="ngForm" (ngSubmit)="submit(loginForm.value)">
    <input type="text" name="user" ngModel required>
    <button  type="submit"  [disabled]="loginForm.invalid">
        Submit
    </button>
</form>

আপনি দেখতে পারেন:

• লগইনফর্ম.ফর্ম ব্যবহার করবেন না, কেবল লগইনফর্ম ব্যবহার করুন
• লগইনফর্ম ইন্ডিয়ালিটিড পাশাপাশি কাজ করে!
• আপনি যদি সঠিক মান (গুলি) পাস করার জন্য () জমা দিতে চান তবে ইনপুট উপাদানটির নাম এবং এনজি মডেল বৈশিষ্ট্য থাকতে হবে

এছাড়াও, এটি যখন আপনি নতুন ফর্মবিল্ডার ব্যবহার করছেন না, যা আমি প্রস্তাব দিই। ফর্মবিল্ডার ব্যবহার করার সময় জিনিসগুলি খুব আলাদা।

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>

ডেমো জন্য এই plunker চেক করুন

অধিক তথ্য

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