Question

如何在表单控件中以角反应形式存储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

Answer 1

根据评论，一种方法是将这些多余的数据存储在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值替换为数据中的值，使其缩放以适合您的需求。

稍后，当您需要查找每组值时（因为您能够通过键引用每个对象），它是恒定时间查找，因此它的检索速度尽可能快。

Angular反应形式如何存储JSON数据？

1 个答案: