如何为 Nullable 3d Json 数据动态设置和获取 NgModel

Question

i'm trying to get/set value into Html input using [(ngModel)] Evrything works fine with my 2d Json level, or even 3d Json level IF my object already exsiting in my json. But, When my 3d object is NULL, i can't use any more the double binding. so i'm separating my NgModel ( [ngModel] to read and (ngModelChange) to set) and this my problem, i can't set an object of undefined. because the structure of my 3d object does not exist.

I tried to create a Model, with my sub Model attributes, but even whit my Model he can't set my attributes.

• This is my response from my WebApi:

"Data": {
    "Entreprise": {
      "PostalAddressSameAsCorrespondence": false,
      "ID_Entreprise": 3374,
      "Prefixe": null,
      "Suffixe": null,
      "ID_EntrepriseParent": null,
      "ID_EntrepriseParentIcriq": null,
      "TypeEntrepriseLookup": "ENSE",
      "EntrepriseSaisonniere": "N",
      ...
      "TelephonePrincipal": {
        "ID_Telephone": 716,
        "ID_Entreprise": 374,
        "ID_Contact": null,
        "TypeTelephoneLookup": "PRI",
        "NumeroTelephone": "999-328-4200",
        "Poste": null,
        "DateCreation": "2017-03-29T15:27:04",
        "CodeUsagerCreation": "ASDQQ",
        "DateModification": null,
        "CodeUsagerModification": null
      },
      "TelephoneSecondaire": null
}

• this is how i read and set value in 2d level

<div class="md-form">
                  <input type="text" id="nomLegalFrancais" class="form-control" mdbInput mdbValidate
                    [(ngModel)]="entrepriseModel.NomLegalFrancais" formControlName="nomLegalFrancais">
                  <label for="nomLegalFrancais">Nom légal français *</label>
                  <mdb-error *ngIf="nomLegalFrancais.invalid && (nomLegalFrancais.dirty || nomLegalFrancais.touched)">
                    Entrée invalide</mdb-error>
                  <mdb-success *ngIf="nomLegalFrancais.valid && (nomLegalFrancais.dirty || nomLegalFrancais.touched)">
                    Entrée valide</mdb-success>
                </div>

• this is how i try to read and set value in 3d level (example TelephoneSecondaire)

<!-- Telephone sans frais -->
                  <div class="col-md-6 col-sm-6">
                    <div class="md-form form-group">
                      <input id="telephoneSansFrais" mdbInput mdbValidate type="text" class="form-control"
                        [ngModel]="entrepriseModel?.TelephoneSansFrais?.NumeroTelephone"
                        (ngModelChange)="entrepriseModel.TelephoneSansFrais?.NumeroTelephone = $event"
                        [textMask]="{mask: phoneSansFraisMask}" formControlName="telephoneSansFrais"> <!-- Setter (ngModelChange) NOT WORKING -->
                      <label for="telephoneSansFrais">Téléphone sans frais</label>
                    </div>
                  </div>

• Entreprise.model.ts:

export class Entreprise {

  public ID_Entreprise: number;
  public Prefixe: string;
  public Suffixe: string;
  public ID_EntrepriseParent: number;
  public ID_EntrepriseParentIcriq: number;
  public NomLegalFrancais: string;
  ...
  public TelephonePrincipal: Telephone;
  public TelephoneSansFrais: Telephone; 

  deserialize(input: any): this {
    Object.assign(this, input.Data.Entreprise);
    return this;
  }
}

export class Telephone implements {
  public ID_Telephone: number;
  public ID_Entreprise: number;
  public ID_Contact: number;
  public TypeTelephoneLookup: string;
  public NumeroTelephone: string;
  public Poste: string;
  public DateCreation: string;
  public CodeUsagerCreation: string;
  public DateModification: string;
  public CodeUsagerModification: string; 
}

i expect to get a json like this:

Using Dynamic Objects:

"Data": {
    "Entreprise": {
      "PostalAddressSameAsCorrespondence": false,
      "ID_Entreprise": 3374,
      "Prefixe": null,
      "Suffixe": null,
      "ID_EntrepriseParent": null,
      "ID_EntrepriseParentIcriq": null,
      "TypeEntrepriseLookup": "ENSE",
      "EntrepriseSaisonniere": "N",
      ...
      "TelephonePrincipal": {
        "ID_Telephone": 716,
        "ID_Entreprise": 374,
        "ID_Contact": null,
        "TypeTelephoneLookup": "PRI",
        "NumeroTelephone": "999-328-4200",
        "Poste": null,
        "DateCreation": "2017-03-29T15:27:04",
        "CodeUsagerCreation": "ASDQQ",
        "DateModification": null,
        "CodeUsagerModification": null
      },
      "TelephoneSecondaire": {
        "NumeroTelephone": "123-465-999", <!-- my input id="telephoneSansFrais" value -->
      }
}

Or this if i'm using my Class "Telephone":

"Data": {
    "Entreprise": {
      "PostalAddressSameAsCorrespondence": false,
      "ID_Entreprise": 3374,
      "Prefixe": null,
      "Suffixe": null,
      "ID_EntrepriseParent": null,
      "ID_EntrepriseParentIcriq": null,
      "TypeEntrepriseLookup": "ENSE",
      "EntrepriseSaisonniere": "N",
      ...
      "TelephonePrincipal": {
        "ID_Telephone": 716,
        "ID_Entreprise": 374,
        "ID_Contact": null,
        "TypeTelephoneLookup": "PRI",
        "NumeroTelephone": "999-328-4200",
        "Poste": null,
        "DateCreation": "2017-03-29T15:27:04",
        "CodeUsagerCreation": "ASDQQ",
        "DateModification": null,
        "CodeUsagerModification": null
      },
      "TelephoneSecondaire": {
        "ID_Telephone": null,
        "ID_Entreprise": null,
        "ID_Contact": null,
        "TypeTelephoneLookup": null,
        "NumeroTelephone": "123-465-999", <!-- my input id="telephoneSansFrais" value -->
        "Poste": null,
        "DateCreation": null,
        "CodeUsagerCreation": null,
        "DateModification": null,
        "CodeUsagerModification": null
      },
}