在嵌套的 json 中注册一个 angular 表单

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

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
}

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

TypeError : cannot read property name_linechart of undefined.

Answer 1

我猜你的 [(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 
}

Answer 2

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 一如既往，是 util 使用接收对象的函数并创建表单

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

在嵌套的 json 中注册一个 angular 表单

register an angular form in a nested json

html

json

angular

angular-material

angular-forms