如何在特定的反应形式控件上设置值？

Question

我有一个带有一些无线电表单控件的表单组。 一台用于照片，无人机，平面图等的收音机。

例如this.services.photo是一组服务。 每个单选组可让您从每个单选中选择一个选项。 即，选择1张照片，选择1架无人机，选择1个平面图。

我已经能够从服务中获取数据，但是无法用数据预填充表单。 如何遍历服务数据收集并设置单选按钮的值？ 我现在正在做的事情没有用。 还是有更好的方法进行设置以使其更简单。

export class CartComponent implements OnInit {

  public myForm:FormGroup;
  public services;
  stepName = "cart";
  constructor(private fb:FormBuilder, private bookerData:BookerService, private settings:FirebaseService, private route:ActivatedRoute, private zone:NgZone) { 
    this.services = this.route.snapshot.data['cartSettings'].services 
  }


  ngOnInit() {
    this.myForm = this.fb.group({
      photo : new FormControl(this.services.photo),
      drone: new FormControl(this.services.drone),
      floorplan: new FormControl(this.services.floorplan),
      video: new FormControl(this.services.video)

    })
    if(this.bookerData.isValidStep(this.stepName)){
      let data = this.bookerData.getStepData(this.stepName)
      console.log(data);

      _.forOwn(data, (v, k)=>{
        this.myForm.get(k).patchValue(v)
      })
    }
  }

}

Answer 1

FormControl构造函数接受您可以使用的“初始状态”值。

email: new FormControl('default value', Validators.compose([
            Validators.required,
            Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
        ])),

如果您的数据晚于启动（ngOnInit），我建议您使用ngModel binding ，以在获取表单数据时更新值。