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>
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);
}
}
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;
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>
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]]
});
}
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é.