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

Question

我有一个这样的对象。

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

是否可以从 angular 表单创建此 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 无法更改，但数字需要更改。表单是反应式驱动的，但我找不到方法，所以我尝试了模板驱动，但两种方法都行不通。

Answer 1

使用 Angular 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;
  }

}

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

How to set the object key value in an angular reactive form

html

javascript

angular

angular-forms