Angular Reactive Form 如何存储 JSON 数据？

Posted 2023-02-18

【中文标题】Angular Reactive Form 如何存储 JSON 数据？

【英文标题】：Angular Reactive Form How to Store JSON data?

【发布时间】：2020-03-10 19:32:27

【问题描述】：

如何在表单控制中以角度反应形式存储 json 数据。

例如

json coming from server  = [
ctrlname : controlName1,
type : "Link",
unit:"M"

,
ctrlname : controlName2,
type : "Date",
unit:"L"

]

// 制作FormGroup

  let a = new formGroup(
    controlName1 : new FormControl(''),
    controlName2 : new FormControl(''),
    )

我想用 formcontrol 存储 type,unit 属性，我该怎么做呢？什么时候用formcontrol制作formgroup？

所以当我得到像 this.myformgroup.controls['controlName1'] 这样的 formcontrol 的值时，我也可以从中获取单位和类型？那么如何在制作表单控件时存储单位和类型json

【问题讨论】：

定义“商店”...

@Brandon 更新了问题请检查

如果“ctrlname”值是唯一的，您可以在值数组上使用.find() 来获取与控件名称对应的值。从那里您可以维护自己的对象数组，其中包含表单输入值加上其他两个值。

@Brandon 是的，我正在使用相同的方法，但如果我们可以使用 formcontrol 存储数据，它会更加优化和更好，因为我必须在任何地方使用 .find 方法。那么无论如何我们可以使用 formcontrol 存储 json 数据吗？

FormControl 没有任何可以将额外值绑定到的附加属性。

【参考方案1】：

根据 cmets，您可以执行此操作的一种方法是将这些额外的数据存储在 ViewModel 属性中，并在您的输入更改时更新它们...

interface IFormData: 
  [controlName: string]: 
    value?: string;
    type?: string;
    unit?: string;
  


@Component(...)
export class YourComponent implements OnInit, OnDestroy 

  control1Subscription: Subscription;
  data: IFormData = 
    controlName1: ,
    controlName2: ,
  ;
  form: FormGroup;
  serviceData;

  constructor (
    formBuilder: FormBuilder;
  )

  ngOnInit(): void 
    // get your service data here. We'll assume it's available

    this.form = this.formBuilder.group(
      controlName1 : new FormControl(''),
      controlName2 : new FormControl(''),
    );

    // every time the input value changes, get the associated values
    this.control1Subscription = this.form.get('controlName1').valueChanges.subscribe(value => 
        const data = this.serviceData.find(data => data.ctrlname === 'controlName1');
        this.data['controlName1'].value = value;
        this.data['controlName1'].type = data.type;
        this.data['controlName1'].unit = data.unit;
    );
  

  ngOnDestroy(): void 
    this.control1Subscription.unsubscribe();
  

您可以在循环中创建这些输入值更改订阅，用硬编码的 ctrlname 值替换数据中的值，使其可以扩展以满足您的需求。

稍后，当您需要查找每组值时，因为您可以通过键引用每个对象，这是恒定时间查找，因此您可以尽可能快地检索它们。

【讨论】：

无论控制器的值变化如何，订阅都会运行，例如，如果它的文本框，那么无论我写一个字符，订阅都会起作用，这会降低性能

您可以随时添加管道以满足您的需求。您要求提供伪代码，而不是精确的、完美的性能调整解决方案。除非您谈论数百个字段，否则性能不会那么差。一个人一次只能输入一个字段。

我认为在 ngoninit 上制作对象映射会很有效，因为映射会运行一次，然后我们可以轻松地使用它们 key 获取值。这种方法正确吗？

好吧，您从未说过何时需要关联这些值。如果您只在流程结束时需要它们，当然可以。如果您在价值发生变化时需要它们，那么您需要我的方法。

但是当一个值改变时你为什么要一次又一次地更新单位和类型的值呢？如果它设置一次它不会一次又一次地改变那为什么要设置它呢？那是我的问题！