зарегистрируйте форму angular во вложенной форме json

Question

Я пытаюсь преобразовать форму html во вложенную json. Это мои классы:

export class Config {
id: string;
name: string;
email: string;
lchart:ComponentLinechart;
}

export class ComponentLinechart {
name_linechart : String;
xAxis_linechart : String;
yAxis_linechart : String;
}

The formcomponent.ts: -

export class FormsComponent implements OnInit {
newConfig: Config = new Config();
constructor(private service : MyserviceService, private configservice:ConfigurationService) {
}
email = new FormControl('', [Validators.required, Validators.email]);
xAxisControl = new FormControl('', Validators.required);
yAxisControl = new FormControl('', Validators.required);
name_linechart = new FormControl('', Validators.required);
name = new FormControl('', Validators.required);
getConfig(): void {
this.configservice.getConfig()
  .subscribe(data => this.configs = data );    
}

createConfiguration(todoForm: NgForm): void {
this.configservice.createConfig(this.newConfig)
  .subscribe(createconfig => {        
    todoForm.reset();
    this.newConfig = new Config();
    this.configs.unshift(createconfig)
  });
 }

Formcomponent. html: -

<form #todoForm="ngForm" (ngSubmit)="createConfiguration(todoForm)" novalidate>
<div class="example-container">

 <mat-form-field appearance="fill">
      <mat-label>Enter your name</mat-label>
         <input matInput [(ngModel)]="newConfig.name" name="name" [formControl]="name" required>
 </mat-form-field>

 <br>

 <mat-form-field appearance="fill">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="pat@example.com" [(ngModel)]="newConfig.email" name="email" 
[formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
  <br>

  <mat-form-field appearance="fill">
    <mat-label>Name-linechart</mat-label>
       <input matInput [(ngModel)]="newConfig.name_linechart" name="name_linechart" 
[formControl]="name_linechart" required>
</mat-form-field>
<br>
  <mat-form-field *ngIf = "sales" >
    <mat-label>xAxis-linechart</mat-label>
    <mat-select [(ngModel)]="newConfig.xAxis-linechart" name="xAxis-linechart" 
[formControl]="xAxisControl" required>
      <mat-option  *ngFor="let field of fields"  [value] = "field">
        {{field}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="xAxisControl.hasError('required')">Please choose a field</mat-error>
  </mat-form-field>
  <br>

  <mat-form-field *ngIf = "sales" >
    <mat-label>yAxis-linechart</mat-label>
    <mat-select [(ngModel)]="newConfig.yAxis-linechart" name="yAxis-linechart"   
[formControl]="yAxisControl" required>
      <mat-option  *ngFor="let field of fields"  [value] = "field">
        {{field}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="yAxisControl.hasError('required')">Please choose a field</mat-error>
  </mat-form-field>

Ожидаемый результат:

{     
    "name": "adam",
    "email": "adam@gmail.com",
    "lchart": {
        "name_linechart": "books",
        "xAxis_linechart": "library",
        "yAxis_linechart": "percentage"
    }
}

Но вот что я получаю:

{
    "name": "adam",
    "email": "adam@gmail.com",
    "lchart": null
}

Я попытался написать newConfig.lchart.name_linechart в formcomponent. html, но это дает мне ошибку:

TypeError : cannot read property name_linechart of undefined.

Answer 1

Foufa, НИКОГДА, НИКОГДА, НИКОГДА, НИКОГДА не используйте [(ngModel)] и formControlName (или formControl) в том же теге . Один для формы шаблона, другой для ReactiveForms, см. документы

Ну. У вас есть объект со свойствами, один из которых является объектом, поэтому у вас есть FormGroup с некоторыми FormControls и одной FormGroup (опять же docs )

myForm=new FormGroup({
    name:new FormControl(),
    email:new FormControl(),
    lchart:new FormGroup({
        name_linechart: new FormControl(),
        xAxis_linechart: new FormControl(),
        yAxis_linechart: new FormControl(),
    })
  })

И . html

<code><form [formGroup]="myForm">
   <!--see, under the formGroup, we using formControlName for the formControl-->
   <input formControlName="name">
   <input formControlName="email">
   <!--when we has a FomgGroup, we use formGrpupName in a div-->
   <div formGroupName="lchart"> 
      <!--and formControlName under the div -->
      <input formControlName="name_linechart">
      <input formControlName="xAxis_linechart">
      <input formControlName="yAxis_linechart">
   </div>
</form>
<!--we can add, only for check-->
<pre>
{{myForm?.value|json}}

Обновление как всегда, если использовать функцию, которая получила объект, и создать форму

getForm(data:any)
{
   data=data || { name:null,
                  email:null,
                  lchart:{
                      name_linechart:null,
                      xAxis_linechart:null,
                      yAxis_linechart:0
                  }
                 }
   return new FormGroup({
        name:new FormControl(data.name,Validator.required),
        email:new FormControl(data.email,[Validator.required,Validators.emailValidator),
        lchart:new FormGroup({
            name_linechart: new FormControl(data.lchart.name_linechart),
            xAxis_linechart: new FormControl(data.lchart.xAxis_linechart),
            yAxis_linechart: new FormControl(data.lchart.yAxis_linechart),
        })
}

И используйте как

myForm=this.getForm(data)  //<--if we has an object "data"
//or
myForm=this.getForm(null)  //if we want a empty form

Answer 2

Я думаю, ваша привязка [(ngModel)] неверна для полей name_linechart, xAxis_linechart, yAxis_linechart.

Это должно быть

[(ngModel)]="newConfig.lchart.name_linechart"
[(ngModel)]="newConfig.lchart.xAxis_linechart"
[(ngModel)]="newConfig.lchart.yAxis_linechart"

измените свой конструктор на -

constructor(private service : MyserviceService, private configservice:ConfigurationService) {
   this.newConfig.lchart=new ComponentLinechart(); //add this line 
}