angular中使用formBuilder创建表单，但是前端会根据选择不同，隐藏某些元素，怎么解决？

Question

angular中使用formBuilder创建表单，表单中有十个元素，但是根据表单某一项的选择，某一些元素会被隐藏，没有返回值，表单不能提交，怎么解决这种情况？

Answer 1

真诚地建议你用工作之余找个教程，系统的重头学习一遍。https://www.kancloud.cn/yunzhiclub/angularguide

你这种情况应该使用跨字段验证器，官方文档：https://angular.io/guide/form-validation#cross-field-validation

正好在项目中用到了，简单补充下解决方案：

  /**
   * 设置流动人口相关的表单验证器
   */
  initFloatingValidators() {
    const floatingControl = this.formGroup.get(this.formKeys.floating);
    this.resetFloatingValidators(floatingControl.value);
    this.formGroup.get(this.formKeys.floating).valueChanges.subscribe(value => {
      this.resetFloatingValidators(value);
    });
  }

  /**
   * 重新设置流动人口表单验证验证器
   * @param addValidator true,添加验证器; false, 取消验证器
   */
  resetFloatingValidators(addValidator: boolean) {
    console.log('reset');
    this.formGroup.get(this.formKeys.floatedDate).clearValidators();
    this.formGroup.get(this.formKeys.floatedPlace).clearValidators();
    if (addValidator) {
      this.formGroup.get(this.formKeys.floatedDate).setValidators(Validators.required);
      this.formGroup.get(this.formKeys.floatedPlace).setValidators(Validators.required);
    }
    this.formGroup.get(this.formKeys.floatedDate).updateValueAndValidity();
    this.formGroup.get(this.formKeys.floatedPlace).updateValueAndValidity();
  }

---

---

---

Answer 2

暂时的解决方案，只需要在创建表单时，存一个初始值就行