如何以角度反应形式设置对象键值

问题描述

我有一个这样的对象。

types: {
  2: {
     zoom: true,select: true
  },4: {
     zoom: true,}

是否可以从角度形式创建此json对象？

<div formGroupName="types">
    <input type="number" matInput placeholder="Type" [(ngModel)]="searchType" i18n-placeholder>

    <div [ngModelGroup]="searchType">
        <mat-slide-toggle [(ngModel)]="searchType.zoom" color="primary">Zoom</mat-slide-toggle>
        <mat-slide-toggle [(ngModel)]="searchType.select" color="primary">Klik</mat-slide-toggle>
    </div>
</div>

遗憾的是，无法更改json，但是数字需要更改。表单是响应式驱动的，但是我找不到方法，所以我尝试了模板驱动，但是都没有解决。

解决方法

使用角度reactiveForm和Factory来构建您的愿望json对象。可以将property动态添加到您的对象。但是您的道具名称不能像您在示例中提到的那样是一些数字。如果您想要某些东西，最好有一个对象数组。

所以，尝试这样的事情：

app.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,Validators } from '@angular/forms';
import { TypeFactory } from './type.factory.ts';
import { TypeModel } from './app-type.model';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit {
  
  typesForm:FormGroup;
  types: TypeModel[] = [];

  constructor(
    private formBuilder: FormBuilder,private typeFactory: TypeFactory,){}

  ngOnInit(){
    this.typesForm = this.formBuilder.group({
      id: ['',[Validators.required]],zoom: [''],select: ['']
    });
  }

  regForm = () => {
    let newType = this.typeFactory.createTypeDto(this.typesForm.getRawValues());
    this.types = [ ...types,...newType];
  }
}

app.component.html

<form [formGroup]="typesForm">
  <input formControlName="id" type="number" matInput placeholder="Type" i18n-placeholder>
  <div class="container">
    <mat-slide-toggle formControlName="zoom"  color="primary">Zoom</mat-slide-toggle>
    <mat-slide-toggle formControlName="select"  color="primary">Klik</mat-slide-toggle>
  </div>
  <button class="btn btn-success" (click)="regForm()">Register</button>
</form>

app-type.model.ts

export class TypeModel {
  id: number;
  zoom: boolean;
  select: boolean;
}

app.factory.ts

import { TypeModel } from './app-type.model';

export class TypeFactory {
  createTypeDto(
    form: any,): TypeModel {
    const model = new TypeModel();
    model.id = form.id;
    model.zoom = form.zoom;
    model.select = form.select;

    return model;
  }

}