Angular Reactive Form 如何存储 JSON 数据？

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

根据 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 值替换数据中的值，使其可以扩展以满足您的需求。

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