Angulaire, Désactivez le bouton "soumettre" à l'aide de [désactivé] pour formulaire de vérification de la validité
Je suis en train de désactiver un bouton de soumission à l'aide de [disable]=form.controls[...].invalid
condition de la vérification. Le bouton de soumission doit être désactivé si il y a un champs de saisie est vide ou invalid
. Mais on dirait que je suis en train de faire le mal. Le bouton est désactivé lorsque je remplir certains champs et à gauche de certains champs vides, sauf pour le premier champ de saisie . Lorsque j'ai rempli le premier champ de saisie, le bouton d'activation (alors que les autres champs de saisie sont encore vides ou invalid
).
JS:
//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
dateFormat: 'dd-mmm-yyyy',
};
setDate(): void {
let date = new Date();
this.form01.patchValue({
DoB: {
date: {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
}
}
});
}
clearDate(): void {
this.form01.patchValue({
DoB: null
});
}
constructor(public builder: FormBuilder) {
this.form01 = this.builder.group({
email: [null, Validators.required], //text
DoB: [null, Validators.required], //radio button
gender: [null, Validators.required], //date picker
});
}
results: object = new Object();
functionForm01() {
this.results = [{
{
"email": this.form01.controls.email.value
},
{
"DoB": this.form01.controls.DoB.value
},
{
"gender": this.form01.controls.gender.value
}
}]
console.log(this.result);
this.form01.reset();
}
HTML:
<!--component.html-->
<div>
<form [formGroup]="form01">
email:<input type="text" name="email" formControlName="email" required/> gender:
<input type="radio" name="gender" formControlName="gender" value="male"> male<br>
<input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
<my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>
<button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()">Click</button>
</form>
</div>
Je suis en utilisant Angulaire tapuscrit et myDatePicker
paquet de ce lien. Quelqu'un peut m'aider s'il vous plaît?
Vous devez vous connecter pour publier un commentaire.
Vous pouvez activer/désactiver le bouton par la vérification de la validité de votre formulaire:
À l'intérieur de votre composante:
Ou via HTML:
valid
n'existe pas sur le type de()=> void
Puisque vous avez votre formGroup objet, vous pouvez désactiver le bouton si form01 n'est pas valide
Vous avez besoin d'importer FormsModule l'intérieur de l'application.le module.ts sous importations d'importation { FormsModule, ReactiveFormsModule } à partir de '@angulaire, formes';