Comment activer le bouton utilisant des formes réactives dans l'angle 2?

J'ai un champ de saisie et un bouton.Quand le champ n'est pas vide, le bouton doit être activé.Mais ici dans mon cas, je passe déjà la valeur d'entrée.elle devrait être activée mais cela ne se produit pas.Il est activé quand je tape quelque chose dans l'entrée d'information field.Any sur la façon d'atteindre it.below est mon codeComment activer le bouton utilisant des formes réactives dans l'angle 2?

export class SignupFormComponent implements OnInit { 
    userForm: FormGroup; 
    submitted: boolean; 
    hello = "hello world"; 

    ngOnInit() { 
    this.userForm = new FormGroup({ 
     firstName: new FormControl('',[<any>Validators.required, <any>Validators.minLength(5)]) 
    }); 
    } 

    onSubmit({ value, valid }: { value: userForm, valid: boolean }) { 
    this.submitted = true; 
    console.log(value,valid); 
    } 
}

ici est mon code html

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)" validate> 
    <div class="form-group"> 
    <label>First Name</label> 
    <input type="text" class="form-control" formControlName="firstName" [value]="hello"> 
    </div> 
    <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Submit </button> 
</form>

Source

2017-09-19 VENKATTHERAISINGSTAR

Quel est cet attribut validate faire sur l'élément de forme? Et si je vous comprends correctement, vous voulez que le bouton soit activé à chaque fois que l'entrée des formulaires est remplie. Donc, vous recherchez la propriété 'dirty' du formulaire, n'est-ce pas? – Abdel

ouais .. comme vous pouvez le voir je reçois la valeur d'entrée du composant.So c'est déjà rempli et le bouton devrait être activé. – VENKATTHERAISINGSTAR

Retirez la [valeur] = "bonjour" de votre entrée comme ils devraient aller dans le new FormControl(value, [validators], [asyncValidators]) pour les formes réactives.

quelque chose comme:

ngOnInit() { 
    this.userForm = new FormGroup({ 
    firstName: new FormControl(this.hello, [<any>Validators.required, <any>Validators.minLength(5)]) 
    }); 
}

Source

2017-09-19 12:36:44 Sonicd300

Ouais j'ai essayé cette méthode et cela fonctionne. Mais est-ce que ce n'est pas possible de réaliser cela comme je l'ai fait? – VENKATTHERAISINGSTAR

Le problème avec le mélange de cette approche est le rendu d'entrée avec une valeur, mais n'appelle aucune des fonctions de reactiveForms pour la propager jusqu'à la classe formGroup que vous créez et utilisez dans votre instruction [disabled]. Si cela a fonctionné, veuillez le marquer comme accepté. – Sonicd300

Le plus simple est d'utiliser des formes réactives, comme ceci:

Etape 1: ReactiveForm import, FormBuilder, validateurs
Etape 2: déclarer objet FormGroup et injecter constructeur de formulaire en constructeur
étape3: init votre groupe de formulaires
p4: en utilisant la forme réactive de la même manière que vous avez fait, mais avec quelques modifications

code:

export class SignupFormComponent implements OnInit { 
    userForm: FormGroup; 
    firstName: string; 

    constructor(private _formBuilder:FormBuilder){} 

    ngOnInit() { 
    this.userForm = this._formBuilder.group({ 
     'firstName': ['',[Validators.required,Validators.minLength(5)]] 
    }); 
    } 

    onSubmit() { 
    console.log(this.firstName); 
    } 
}

HTML:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" name="userForm"> 
     <div class="form-group"> 
     <label>First Name</label> 
     <input type="text" [(ngModel)]="firstName" class="form-control" formControlName="firstName"> 
     <p *ngIf="userForm.controls.firstName.invalid && (userForm.controls.firstName.dirty || userForm.controls.firstName.touched)"> Error message </p> 
     </div> 
     <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Submit </button> 
    </form>

Source

2017-09-21 08:20:33

Comment activer le bouton utilisant des formes réactives dans l'angle 2?

Répondre

Questions connexes