web-dev-qa-db-fra.com

désactiver le bouton si l'entrée est vide

Comment puis-je désactiver le bouton si l'entrée est vide et l'activer lorsque l'utilisateur commence à taper l'entrée, j'ai essayé cela:

<input #new_field type="text" autocomplete="off" />
<p-button (onClick)="saveNewField(new_field.value)" [disabled]="new_field.value ==''" label="Save"></p-button>

et aussi ceci:

 <input [(ngModel)]="searchText" size="30" autocomplete="off" />
    <p-button (onClick)="saveNewField(searchText)" [disabled]="!searchText" label="Save"></p-button>
angularangular5
4
E.Meir

Utilisez ngModel et liez une valeur et utilisez-le pour désactiver le bouton. Essaye ça:

<input type="text" autocomplete="off" [(ngModel)]="searchText"/>

<p-button (onClick)="saveNewField(searchText)" [disabled]="!searchText" label="Save"></p-button>

Fichier TypeScript:

export class AppComponent  {
  searchText: string;

  saveNewField(searchText) {
    console.log("searched Text", searchText);
  }
}
8
Pradnya Sinalkar

Vous pouvez utiliser ngModel pour une liaison bidirectionnelle. Il n'est pas nécessaire d'appeler le formulaire. Appelez simplement ci-dessous.

<input  type="text" [(ngModel)]="some"/>
<button [disabled]="!some" >submit</button>

Déclarez également la variable some in composant pour lier la valeur.
ex: some: any;

1
Dharmarajm

Essaye ça

<form role="form" #f="ngForm" novalidate>
    <input class="form-input" type="number" [(ngModel)]="new_field" name="new_field" max="10">
    <p-button type="submit" (onClick)="saveNewField(new_field.value)" [disabled]="f.form.invalid">Test</p-button>
</form>
0
Robert

Partie HTML 

<button type="button" class="btn btn-primary" (click)="doSomething()" [disabled]="!myForm.valid">Click me</button>

Partie TS:

ngOnInit(): void {
        this._buildForm();
    }

private _buildForm() {
        this.myForm = this.fb.group({
            someComponent1: [],
            someComponent2: [, [Validators.required]]
        });
    }

EXPLICATION

Vous devez ajouter une validation pour vos composants et définir check is form validated. Dans mon exemple ci-dessus, si le champ de saisie Composant 2 est vide, votre formulaire sera invalidé et le bouton désactivé.

0
Joe Belladonna