在嵌套的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;
}

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)
  });
 }

The 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="[email protected]" [(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": "[email protected]",
    "lchart": {
        "name_linechart": "books",
        "xAxis_linechart": "library",
        "yAxis_linechart": "percentage"
    }
}

但是这就是我得到的：

{
    "name": "adam",
    "email": "[email protected]",
    "lchart": null
}

我试图在formcomponent.html中编写newConfig.lchart.name_linechart，但它给了我错误：

TypeError : cannot read property name_linechart of undefined.

Answer 1

Foufa，从不，从不，从不，从不在same标记中使用[（ngModel）]和formControlName（或formControl）。一个用于模板表单，另一个用于ReactiveForms，请参见the docs

嗯。您有一个具有属性的对象，其中一个是对象，因此，您有一个带有某些FormControls和一个FormGroup的FormGroup，（再次the 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

<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}}
</pre>

<< [Update一如既往，是否使用了接收对象并创建表格的函数

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 
}