TypeScript Angular ReactiveForms 2 方式属性绑定

Question

早安，

我正在使用 Angular 6、Java Spring 和 mysql 数据库构建一个 webApplication。 我构建了一个用于创建和更新客户数据的表单。

在创建客户时，使用 REST 将数据传递到服务器，这很有效，因为我的请求的谷歌控制台输出是一个 json 字符串，它将表单模型和输入到该表单的数据相关联。

我的问题是在更新时，我用客户端数据填充表单，但是当我提交时，谷歌的控制台在我的发布请求中输出一个空对象。

我的表格：

<div class="container spacer borders" *ngIf="showClientForm">
  <form [formGroup]="form" (ngSubmit)="updateClient(this.form.value)">
    <div class="form-row">
      <div class="form-group col-md-6">
        <p><b>Edition Client</b></p>
        <input  type="text" 
                class="form-control" 
                id="name" 
                placeholder="Raison sociale ou Nom et Prénom" 
                [(value)]="selectedClient.nom"
                formControlName = "nom"
                />
        <input  type="text" 
                class="form-control small-spacer" 
                id="email" 
                placeholder="Raison sociale ou Nom et Prénom" 
                [(value)]="selectedClient.email"
                formControlName = "email"
                />
      </div>
      <div class="form-check-inline col-md-6">
        <input  class="form-check-input" 
                type="radio" 
                id="type_particulier" 
                name="typeClient" 
                [(value)]="selectedClient.value"
                formControlName = "typeClient"
                />
        <label class="form-check-label" for="type_particulier">
          Particulier
        </label>
        <input  class="form-check-input spacer-left" 
                type="radio" 
                name="typeClient" 
                id="type_professionnel" 
                [(value)]="selectedClient.value"
                formControlName="typeClient"
                />
        <label class="form-check-label" for="type_professionnel">
          Professionnel
        </label>
      </div>
    </div>
    <div class="form-row spacer">
      <div class="form-group col-md-6 spacer" formGroupName="adresseFacturation">
        <p><b>Adresse Facturation</b></p>
        <input  type="text" 
                class="form-control" 
                id="adr_fact" 
                placeholder="Numéro, voie ..." 
                [(value)]="selectedClient.adresseFacturation.rue"
                formControlName="rue"
                />
        <input  type="text" 
                class="form-control small-spacer" 
                id="adr_fact" 
                placeholder="Complément d'adresse" 
                [(value)]="selectedClient.adresseFacturation.complement"
                formControlName="complement"
                />
        <div class="form-row">
          <div class="col-md-6">
            <input  type="text" 
                    class="form-control small-spacer" 
                    id="gc_cp" 
                    placeholder="Code Postal" 
                    [(value)]="selectedClient.adresseFacturation.codePostal"
                    formControlName="codePostal"
                    />
          </div>
          <div class="col-md-6">
            <input  type="text" 
                    class="form-control small-spacer" 
                    id="gc_ville" 
                    placeholder="Ville" 
                    [(value)]="selectedClient.adresseFacturation.ville"
                    formControlName="ville"
                    />
          </div>

        </div>
      </div>
      <div class="form-group col-md-6 spacer" formGroupName="adresseTravaux">
          <p><b>Adresse Travaux</b></p>
          <input  type="text" 
                  class="form-control" 
                  id="adr_fact" 
                  placeholder="Numéro, voie ..." 
                  [(value)]="selectedClient.adresseTravaux.rue"
                  formControlName="rue"
                  />
          <input  type="text" 
                  class="form-control small-spacer" 
                  id="adr_fact" 
                  placeholder="Complément d'adresse" 
                  [(value)]="selectedClient.adresseTravaux.complement"
                  formControlName="complement"
                  />
          <div class="form-row">
            <div class="col-md-6">
              <input  type="text" 
                      class="form-control small-spacer" 
                      id="gc_cp" 
                      placeholder="Code Postal" 
                      [(value)]="selectedClient.adresseTravaux.codePostal"
                      formControlName="codePostal"
                      />
            </div>
            <div class="col-md-6">
              <input  type="text" 
                      class="form-control small-spacer" 
                      id="gc_ville" 
                      placeholder="Ville" 
                      [(value)]="selectedClient.adresseTravaux.ville"
                      formControlName="ville"
                      />
            </div>

          </div>
        </div>
    </div>
    <div class="spacer">
      <button class="btn btn-dark" type="submit">Enregistrer</button>
      <button class="btn btn-dark spacer-left" type="button" (click)="returnToList()">Retour</button>
    </div>

  </form>
</div>

当我在每个输入字段上删除 [(value)]="selectedClient.nom" 时，我可以使用该表单创建一个客户，但是当我尝试绑定 value 属性以便用客户填充值以更新此值时，表单模型会不考虑。

这是我的组件 .ts，其中包括模型：

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../services/client.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-gest-clients',
  templateUrl: './gest-clients.component.html',
  styleUrls: ['./gest-clients.component.css']
})
export class GestClientsComponent implements OnInit {

  clients:Array<Object> = [];
  selectedClient;
  showClientForm = false;
  showNewClientForm = false;
  form:FormGroup;
  msg;


  constructor(private clientService:ClientService,
              private formBuilder:FormBuilder) { }

  ngOnInit() {
    this.clientService.GetClientList().subscribe(
      data => this.handleContent(data)
    );
    this.form = this.formBuilder.group({
      'id':'',
      'nom':'',
      'email':'',
      'adresseFacturation' : this.formBuilder.group({
        'id':'',
        'rue':'',
        'complement':'',
        'ville':'',
        'codePostal':'',
        'complementCodePostal':'',
        'supprimer':''
      }),
      'adresseTravaux' : this.formBuilder.group({
        'id':'',
        'rue':'',
        'complement':'',
        'ville':'',
        'codePostal':'',
        'complementCodePostal':'',
        'supprimer':''
      }),
      'typeClient':'',
      'supprimer':''
    });




  }

  selectClient(client){
    this.showClientForm = true;
    this.selectedClient = client;
  }

  deleteClient(Client){

  }

  handleContent(data){
    this.clients = data;
  }

  updateClient(data){
    console.log(data) **// Empty json string (model only) KO**
    this.clientService.updClient(data).subscribe(
      res => this.msg = res,
      error => this.msg = error
    )
  }

  returnToList(){
    this.form.reset()
    this.selectedClient = null;
    this.showClientForm = false;
    this.showNewClientForm = false;

  }

  addNew(){
    this.showNewClientForm = true;
  }

  AddNewClient(clientFormData){
    console.log(clientFormData) // Correct json string (model + data) ok
    this.clientService.CreateNewClient(clientFormData).subscribe(
      res => this.msg = res,
      error => this.msg = error
    )

  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { DevisComponent } from './devis/devis.component';
import { CommandeComponent } from './commande/commande.component';
import { GestDevisComponent } from './gest-devis/gest-devis.component';
import { GestCommandeComponent } from './gest-commande/gest-commande.component';
import { GestClientsComponent } from './gest-clients/gest-clients.component';
import { GestFournisseursComponent } from './gest-fournisseurs/gest-fournisseurs.component';
import { GestMaterielsComponent } from './gest-materiels/gest-materiels.component';
import { GestPrestationsComponent } from './gest-prestations/gest-prestations.component';
import { MaterielComponent } from './materiel/materiel.component';
import { PrestationComponent } from './prestation/prestation.component';
import { HomeComponent } from './home/home.component';
import { ClientService } from './services/client.service';

const routes = [
  {path:"", component:HomeComponent},
  {path:"devis", component:DevisComponent},
  {path:"commande", component:CommandeComponent},
  {path:"materiel", component:MaterielComponent},
  {path:"prestation", component:PrestationComponent},
  {path:"gestDevis", component:GestDevisComponent},
  {path:"gestCommandes", component:GestCommandeComponent},
  {path:"gestFournisseurs", component:GestFournisseursComponent},
  {path:"gestMateriels", component:GestMaterielsComponent},
  {path:"gestClients", component:GestClientsComponent},
  {path:"gestPrestations", component:GestPrestationsComponent}

]

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    DevisComponent,
    CommandeComponent,
    GestDevisComponent,
    GestCommandeComponent,
    GestClientsComponent,
    GestFournisseursComponent,
    GestMaterielsComponent,
    GestPrestationsComponent,
    MaterielComponent,
    PrestationComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    FormsModule, ReactiveFormsModule
  ],
  providers: [ClientService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

向菲利普致敬，

只需更改您的 ngSubmit 并删除参数 => (ngSubmit)="updateClient()"

在 updateClient() 中反映这一变化并简单地使用 this.form

updateClient(){
  console.log(this.form.value) // ** should print your updated customer object
  etc ...
}

A+ 菲利普

Answer 2

只需从属性绑定中删除括号 () 并仅使用方括号。

<input  type="text" 
            class="form-control" 
            id="adr_fact" 
            placeholder="Numéro, voie ..." 
            [value]="selectedClient.adresseFacturation.rue"
            formControlName="rue"
            />

Answer 3

我终于在 angular 文档中找到了解决方案。正如文档所建议的那样，您不应该直接在 html 中直接定义表单标记属性值，而是应该在 .ts 中使用 setValue/patchvalue 方法。此方法设置表单中每个 FormControl 的默认值。我还找到了为表单中的嵌入元素设置值的解决方案。我的代码不是最漂亮的，但到目前为止它可以工作：

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../services/client.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-gest-clients',
  templateUrl: './gest-clients.component.html',
  styleUrls: ['./gest-clients.component.css']
})
export class GestClientsComponent implements OnInit {

  clients:Array<Object> = [];
  selectedClient;
  showClientForm = false;
  showNewClientForm = false;
  form:FormGroup;
  msg;


  constructor(private clientService:ClientService,
              private formBuilder:FormBuilder) { }

  ngOnInit() {
    this.clientService.GetClientList().subscribe(
      data => this.handleContent(data)
    );
    this.form = this.formBuilder.group({
      'id':'',
      'nom':'',
      'email':'',
      'adresseFacturation' : this.formBuilder.group({
        'id':'',
        'rue':'',
        'complement':'',
        'ville':'',
        'codePostal':'',
        'complementCodePostal':'',
        'supprimer':''
      }),
      'adresseTravaux' : this.formBuilder.group({
        'id':'',
        'rue':'',
        'complement':'',
        'ville':'',
        'codePostal':'',
        'complementCodePostal':'',
        'supprimer':''
      }),
      'typeClient':'',
      'supprimer':''
    });

  }


  selectClient(client){
    this.showClientForm = true;
    this.selectedClient = client;

    // sets the default value for the first lyer of elements in my form model
    this.form.patchValue({
      'id':this.selectedClient.id,
      'nom':this.selectedClient.nom,
      'email':this.selectedClient.email,
      'typeClient':this.selectedClient.typeClient,
      'supprimer':this.selectedClient.supprimer
    });

    // sets the default value for embedded elements in the form model 
    // Invoicing address
    (<FormGroup>this.form.controls['adresseFacturation']).controls['id'].patchValue(this.selectedClient.adresseFacturation.id);
    (<FormGroup>this.form.controls['adresseFacturation']).controls['rue'].patchValue(this.selectedClient.adresseFacturation.rue);
    (<FormGroup>this.form.controls['adresseFacturation']).controls['complement'].patchValue(this.selectedClient.adresseFacturation.complement);
    (<FormGroup>this.form.controls['adresseFacturation']).controls['ville'].patchValue(this.selectedClient.adresseFacturation.ville);
    (<FormGroup>this.form.controls['adresseFacturation']).controls['codePostal'].patchValue(this.selectedClient.adresseFacturation.codePostal);
    (<FormGroup>this.form.controls['adresseFacturation']).controls['complementCodePostal'].patchValue(this.selectedClient.adresseFacturation.complementCodePostal);
    (<FormGroup>this.form.controls['adresseFacturation']).controls['supprimer'].patchValue(this.selectedClient.adresseFacturation.supprimer);
    // works address

    // handling null value 
    if(this.selectedClient.adresseTravaux==null){
      (<FormGroup>this.form.controls['adresseTravaux']).controls['id'].patchValue("");
    (<FormGroup>this.form.controls['adresseTravaux']).controls['rue'].patchValue("");
    (<FormGroup>this.form.controls['adresseTravaux']).controls['complement'].patchValue("");
    (<FormGroup>this.form.controls['adresseTravaux']).controls['ville'].patchValue("");
    (<FormGroup>this.form.controls['adresseTravaux']).controls['codePostal'].patchValue("");
    (<FormGroup>this.form.controls['adresseTravaux']).controls['complementCodePostal'].patchValue("");
    (<FormGroup>this.form.controls['adresseTravaux']).controls['supprimer'].patchValue("");
    }else{
      (<FormGroup>this.form.controls['adresseTravaux']).controls['id'].patchValue(this.selectedClient.adresseTravaux.id);
    (<FormGroup>this.form.controls['adresseTravaux']).controls['rue'].patchValue(this.selectedClient.adresseTravaux.rue);
    (<FormGroup>this.form.controls['adresseTravaux']).controls['complement'].patchValue(this.selectedClient.adresseTravaux.complement);
    (<FormGroup>this.form.controls['adresseTravaux']).controls['ville'].patchValue(this.selectedClient.adresseTravaux.ville);
    (<FormGroup>this.form.controls['adresseTravaux']).controls['codePostal'].patchValue(this.selectedClient.adresseTravaux.codePostal);
    (<FormGroup>this.form.controls['adresseTravaux']).controls['complementCodePostal'].patchValue(this.selectedClient.adresseTravaux.complementCodePostal);
    (<FormGroup>this.form.controls['adresseTravaux']).controls['supprimer'].patchValue(this.selectedClient.adresseTravaux.supprimer);
    }




    /**
     * Information found from another post in stackoverflow which led me onto the right way of using setValue or PatchValue
     * 
     * . Using setValue()

    this.userForm.setValue({name: 'Mahesh', age: '20' });

    It is necessary to mention all from controls in setValue() otherwise it will throw error. 

    2. Using patchValue()

    this.userForm.patchValue({name: 'Mahesh'}); 

    When we use patchValue() then it is not necessary to mention all form controls.
    */


  }

  deleteClient(Client){

  }

  handleContent(data){
    this.clients = data;
  }

  updateClient(data){
    console.log(data)
    this.clientService.updClient(data).subscribe(
      res => this.msg = res,
      error => this.msg = error
    )
  }

  returnToList(){
    this.form.reset()
    this.selectedClient = null;
    this.showClientForm = false;
    this.showNewClientForm = false;

  }

  addNew(){
    this.showNewClientForm = true;
  }

  AddNewClient(clientFormData){
    console.log(clientFormData)
    this.clientService.CreateNewClient(clientFormData).subscribe(
      res => this.msg = res,
      error => this.msg = error
    )

  }

}