4
votes

ngModel sur le même champ de formulaire que formControlName

J'avais l'habitude d'avoir un formulaire simple sans aucune validation où le HTML ressemblait à peu près à ceci:

ERROR in src/app/new-to-do-dialog/new-to-do-dialog.component.ts(31,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.
src/app/new-to-do-dialog/new-to-do-dialog.component.ts(32,9): error TS2322: Type 'AbstractControl' is not assignable to type 'DateConstructor'.
  Property 'prototype' is missing in type 'AbstractControl'.
src/app/new-to-do-dialog/new-to-do-dialog.component.ts(33,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.

J'ai ensuite déplacé mon formulaire vers des formulaires réactifs et reçu l'avertissement que je ne pouvais pas avoir ngModel dans le même champ que formControlname. J'ai du mal à attribuer les données du formulaire au champ de saisie du service.

Section actuelle de HTMl:

saveToDo() {
        this.dialogRef.close();
        this.todoListService.toDoData.taskName = this.todoForm.get('taskName');
        this.todoListService.toDoData.dueDate = this.todoForm.get('dueDate');
        this.todoListService.toDoData.extraNote = this.todoForm.get('extraNote');
        this.todoListService.addToDo();
    }

Donc je supprimé la ligne ngModel et ajouté ceci à mon TS:

<form [formGroup]="todoForm">
    <mat-form-field>
        <input matInput
               placeholder="TaskName"
               formControlName="taskName"
               required
               [(ngModel)]="todoListService.toDoData.taskName"
        >
    </mat-form-field>

Les erreurs que j'obtiens sont:

<mat-form-field>
        <input matInput
               type="text"
               placeholder="TaskName"
               [(ngModel)]="todoListService.toDoData.taskName"
               formControlName="taskName"
               required
               required>
               [(ngModel)]="todoListService.toDoData.taskName"
        >
    </mat-form-field>

Apparemment, j'ai mal compris quelque chose concernant l'accès aux données à partir du formulaire.

J'ai suivi ce guide et cet exemple:

https://angular.io/api/forms/FormControlName#use-with-ngmodel https://stackblitz.com/edit/example-angular-material-reactive- formulaire

Merci pour toute aide!

angular angular-reactive-forms

2 commentaires

Je pense que la propriété de nom devrait être supprimée si vous utilisez un formulaire réactif

Idem avec (NgModel) et la directive requise. Ils doivent être déclarés au format formGroup

3 Réponses :

1
votes

Ici this.todoForm.get ('controlname') retourne l'objet AbstractControl alors accédez à la valeur de l'objet comme ci-dessous

saveToDo() {
        this.dialogRef.close();
        this.todoListService.toDoData.taskName = this.todoForm.get('taskName').value;
        this.todoListService.toDoData.dueDate = this.todoForm.get('dueDate').value;
        this.todoListService.toDoData.extraNote = this.todoForm.get('extraNote').value;
        this.todoListService.addToDo();
    }

J'espère que cela vous aidera!

1 commentaires

vous pouvez également utiliser this.todoForm.value, ou this.todoForm.controls.tasjName.value, par exemple: this.todo.ListService, toDoData = this.todoForm.value

2
votes

À partir d'Angular 7, vous ne pouvez pas utiliser à la fois formControlName et ngModel. Si vous souhaitez utiliser des formulaires basés sur des modèles , vous pouvez utiliser ngModel et si vous souhaitez utiliser des formulaires réactifs , vous ne pouvez pas utiliser ngModel. (Simple)

COMME vous avez décidé de suivre l'approche des formulaires réactifs :

En HTML:

selectedCode: string = "";

onChangeCode(code: string) {
   this.selectedCode = code;
}

En TS :

<input type="text" (change)="onChangeCode($event.target.value)" formControlName="code" id="txtCode">

0 commentaires

0
votes

supprimer [(ngModel)] du fichier html.

puis ajouter ce qui suit à votre fichier ts

    this.todoForm.patchValue({
      taskName: this.todoListService.toDoData.taskName
    });

0 commentaires