Discussion :

[wangi]

Je réalise un formulaire d'enregistrement des information d'un contenaire. Ce formulaire a un champ client qui remplit à partir d"une liste de
choix.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="container mt-3">
    <!--taille de l'ecran md-6 c'est à dire la moitié de l'ecran
             en boostrap la taille de l'ecran est 12-->
             <div class="col-md-9 col-sm-6 col-xm-12">
 
    <div class="card">
        <div class="card-header">Nouveau Conteneur</div>
        <div class="card-body">       
           <form #f="ngForm" (ngSubmit)="onSaveConteneur(f.value)">
 
            <div class="form-group">
                <label class="control-label"> Code</label>
                <input type="text" name="code" ngModel class="form-control"/>
            </div>
            <!--
                     <div class="form-group">
                <label class="control-label"> client</label>
                <input type="text" name="clientdto.idclient" ngModel class="form-control"/>
            </div>
            -->           
 
            <div class="form-group">
                <label class="control-label"> Nom client</label>
                <select name="clientdto" ngModel class="form-control">
                    <option value="">-Selectionnez ici -</option>
                    <option *ngFor="let clt of clients" value="{{clt.idclient}}">{{clt.idclient}}-{{clt.nom}}</option>
                </select>
            </div>
 
            <div class="form-group">
                <label class="control-label">Type Marchandise</label>
                <input type="text" name="typeMarchandisedto.codeM" ngModel class="form-control"/>
            </div>
 
            <div class="form-group">
                <label class="control-label"> Dimension</label>
                <input type="text" name="dimension" ngModel class="form-control"/>
            </div>
            <div class="form-group">
                <label class="control-label"> Poids</label>
                <input type="text" name="poids" ngModel class="form-control"/>
            </div>
 
            <div class="form-group">
                <label class="control-label">Quantité</label>
                <input type="number" name="quantite" ngModel class="form-control"/>
            </div>
 
 
            <br><br>
            <button class="btn btn-primary" type="submit">Sauvegarder</button>
           </form>
        </div>
    </div>
     </div><!--fin taille ecran-->
    </div><!--fin container-->

Lorsque je clic sur le bouton enregistrer, le message suivant s'affiche:

JSON parse error: Cannot construct instance of `rdc.makiese.lgsc_msei.dto.ClientDto` (although at least one Creator exists): no String-argument constructor/factory method to deserialize from String value ('1')

[dukoid]

Template-driven Forms

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@NgModule({
    ...
    imports: [ FormsModule
    ...
    ]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<form (ngSubmit)="submitBook()">
    <input
            name="title"
            type="text"
            [(ngModel)]="book.title">
    <button type="submit">SUBMIT</button>
</form>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

book!: Book;

Reactive Forms

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@NgModule({
    ...
    imports: [
        ReactiveFormsModule
    ]
    ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form [formGroup]="bookForm" (ngSubmit)="submitBook()">
    <input type="text" formControlName="title">
    <textarea formControlName="description"></textarea>
    <button type="submit">SUBMIT</button>
</form>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
export class BookFormComponent {
    bookForm = new FormGroup({
        title: new FormControl(),
        description: new FormControl()
    });
    submitBook() {
        console.log(this.bookForm.value);
    }
}