Come disabilitare il pulsante "Invia"?

127

Come disabilitare il pulsante "Invia" fino a quando il modulo non è valido?

Angular2 ha un equivalente di ng-disabled che può essere utilizzato sul pulsante Invia? (ng-disabled non funziona per me.)

forms angular

— Bonneville
fonte

1

solo quando si utilizza la convalida intermedia, ad esempio durante la digitazione. Non farlo .. solo con un buon pensiero o con una convalida asincrona, che si basa, ad esempio, su un backend.

— Sam Vloeberghs

243

Come visto in questo esempio angolare , c'è un modo per disabilitare un pulsante fino a quando l'intero modulo è valido:

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

— Università angolare
fonte

come ottenere il valore della radio e della casella di controllo utilizzando formBuilder?

— Pardeep Jain

il link indicato ha una vecchia sintassi per angular2, ad esempio ng-form-modal. chiedigli di aggiornare grazie.

— Pardeep Jain

Controlla questo esempio, la sintassi è aggiornata -> blog.jhades.org/…

— Angular University

1

come puoi convalidare un modulo se disabiliti il pulsante di invio (a meno che non lo fai sul flusso ma non sempre mi piace)? Si prega di essere consapevoli dei problemi di UX qui ..

— Sam Vloeberghs

6

[disabled] = "ngForm.invalid" puoi anche controllare

— shaunak1111

47

in Angular 2.xx , 4 , 5 ...

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

— Bougarfaoui El houcine
fonte

7

.html

<form [formGroup]="contactForm">

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

ts

contactForm: FormGroup;

— Alvic
fonte

Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo su come e / o perché risolve il problema migliorerebbe il valore a lungo termine della risposta.

— Nic3500

5

Ecco un esempio funzionante (dovrai fidarti di me che c'è un metodo submit () sul controller: stampa un oggetto, come {user: 'abc'} se 'abc' è inserito nel campo di input):

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

Come potete vedere:

non usare loginForm.form, usa solo loginForm
loginForm.invalid funziona come! loginForm.valid
se vuoi che a submit () vengano passati i valori corretti, l'elemento di input dovrebbe avere gli attributi name e ngModel

Inoltre, questo è quando NON stai usando il nuovo FormBuilder, che consiglio. Le cose sono molto diverse quando si usa FormBuilder.

— John Deighan
fonte

4

La convalida del modulo è molto semplice in Angular 2

Ecco un esempio,

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

Controlla questo plunker per la demo

Ulteriori informazioni

— Prashobh
fonte

2

È importante includere la parola chiave " obbligatoria " all'interno di ciascuno dei tag di input obbligatori affinché funzioni.

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

— Emir Memic
fonte

0

Può essere sotto il codice può aiutare:

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

— Shivang Gupta
fonte

0

Questo ha funzionato per me.

ts

newForm : FormGroup;

.html

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

— bereket gebredingle
fonte