J'ai créé une forme angulaire en utilisant materialize-css . Voici le HTML Et c'est ainsi que j'ai créé la forme angulaire Et quand je soumettre Je fais Si je change l'option de sélection de département en autre chose et soumets et réinitialise le formulaire en définissant addFeed(data: any): void {
console.log(data);
this.addFeedForm.reset({ departmentId: 0 });
}
this.addFeedForm = new FormGroup({
departmentId: new FormControl(0,Validators.compose([Validators.required])),
});
<form [formGroup]="addFeedForm" (ngSubmit)="addFeed(addFeedForm.value)" class="col s12">
<div class="row">
<div class="input-field col m6 s12">
<select formControlName="departmentId" #feedDepartment>
<option value=0>General</option>
<option [value]="department.id" *ngFor="let department of departmentList">{{department.name}}</option>
</select>
<label>Department</label>
</div>
<div>
<button type="button" class="btn waves-effect waves-light col s3 offset-s5" (click)="resetAddFeedForm()">Reset</button>
<button type="submit" [disabled]="!addFeedForm.valid" class="btn waves-effect waves-light col s3 offset-s1">Add</button>
</div>
</div>
</form>
departmentId sur 0 alors " General
Il ne se met pas à jour sur l'interface utilisateur mais sur la console, il définit departmentId sur 0.
L'interface utilisateur le comportement est comme
sur l'interface utilisateur, l'option sélectionnée est différente mais sur la console departmentId est 0
Mise à jour: Ceci est le stackblitz
3 Réponses :
mettez à jour votre contrôle de formulaire en utilisant
this.addFeedForm.controls['departmentId'].setValue('0');
Ou vous pouvez également utiliser
addFeed(data: any): void {
console.log(data);
this.addFeedForm.patchValue({departmentId: '0'});
}
les deux solutions ne fonctionnent pas: (la même chose sur la sélection de l'interface utilisateur n'est pas mise à jour mais la valeur de departmentId est définie sur 0
lorsque vous définissez la valeur de departmentId pour que cette valeur soit une chaîne car vous affectez une valeur de chaîne à departmentId
les mêmes variables qui ne fonctionnent pas sont mises à jour mais aucune réflexion sur l'option de sélection .. vérifiez l'image que j'ai ajoutée en question
faites votre option puis essayez
@SunilGarg this.addFeedForm.get ('departmentId'). Reset (); essayez ceci stackblitz.com/edit/patch-with-form
il s'agit davantage d'un problème de materialize-css .. à condition que le lien stackblitz en question
Essayez de cette façon
addFeed(data: any): void {
this.addFeedForm.patchValue({departmentId: [0]});
}
PatchValue fonctionnera toujours pour redéfinir la valeur angulaire. Cela fonctionne toujours pour moi.
les mêmes variables qui ne fonctionnent pas sont mises à jour mais aucune réflexion sur l'option de sélection
il s'agit davantage d'un problème de materialize-css .. à condition que le lien stackblitz en question
mettez le type reset sur le bouton cela fonctionnera:
exemple de travail: exemple en direct de stackblitz
stackblitz.com/edit/angular-tchftw .. a également mis à jour la question
Hé, vous devez mettre le type de bouton comme réinitialisé sur la méthode resetAddFeedForm (). ça va marcher.
Veuillez fournir un stackblitz minimal présentant votre problème si aucune des réponses existantes ne résout votre problème. Le code que vous avez publié dans votre question semble réinitialiser l'interface correctement: stackblitz.com/edit/angular-4degxv < / a>
Cela a à voir avec le fonctionnement de
materialize-css. Checkout stackoverflow.com/q/30341095/9423231 par exemple. La liaison de données bidirectionnelle ne semble pas fonctionner et vous devrez faire beaucoup de choses manuellement. Il peut être plus simple d'utiliser l'encapsuleur Angular Materialize ngx-materialize si l'ensemble de votre interface utilisateur est fait avec se matérialiser.