Question

我正在尝试基于JSON结构构建动态表单。我想要的是，如果第一个下拉菜单（或另一个表单控件）中的值发生更改，则下一个表单控件的值会自动设置。例如，在下面的JSON中：

{
"input_params": [
        {
          "input_param_id": 1,
          "label": "Academic Year",
          "name": "p_acad_id",
          "type": "select",
          "value": "2018-19",
          "param_length": 30,
          "options": [
            { "label": "(choose one)", "value": "" },
            { "label": "2018-19", "value": "2018-19" },
            { "label": "2019-20", "value": "2019-20" }
          ],
          "query_id": 1
        },
        {
          "input_param_id": 2,
          "label": "Session Name",
          "name": "p_session_id",
          "type": "select",
          "value": "Primary",
          "param_length": 30,
          "options": [
            { "label": "(choose one)", "value": "" },
            { "label": "Primary", "value": "Primary" },
            { "label": "Middle", "value": "Middle" },
            { "label": "Senior", "value": "Senior" }
          ],
          "query_id": 1
        },
        {
          "input_param_id": 3,
          "label": "Date From",
          "name": "p_date_from_o",
          "type": "date",
          "param_length": 10,
          "value":"2019-06-26",
          "query_id": 1
        },
        {
          "input_param_id": 4,
          "label": "Date To",
          "name": "p_date_to_o",
          "type": "date",
          "param_length": 10,
          "value": "2019-06-26",
          "query_id": 1
        }
      ]
    }

如果我将“学术年”的值选择为“ 2018-19”，则我的第二个表单控件（即会话名称）应自动填充“主要”值。这就是我创建表单的方式：
.ts：

 createForm(obj){
    //console.log("In createForm(), obj is:", JSON.stringify(obj));
    //console.log("params_count", obj[0].param_count);
    console.log("In create form, obj:", obj);
    if(obj.length != 0){
      this.input_params = obj[0].input_params;
      console.log("In create form where input_params are", obj[0].input_params)
      //console.log("input_params: ", JSON.stringify(this.input_params));
      const params = this.input_params;
      const formGroup = {};
      for(let input_param of this.input_params)
      {
        formGroup[input_param.name] = new FormControl('');
      }
      this.form = new FormGroup(formGroup);
    }
  }

<!-- <pre>{{getJsonString()}}</pre> -->

<div class="container-fluid">
  <div *ngIf="paramsObj$ != undefined">
    <form class = "form-horizontal" novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form">

      <div *ngFor="let prop of input_params">

        <label [attr.for]="prop.name">{{prop.label}}</label>

        <div [ngSwitch]="prop.type">

          <div class="form-group">
            <input *ngSwitchCase="'text'"  class="form-control" [formControlName]="prop.name" [id]="prop.input_param_id" [type]="prop.type" [value]="prop.value">
          </div>

          <div *ngSwitchCase="'select'">
            <div class="form-group">
              <select [formControlName]="prop.name" class="form-control" [value]="prop.value">
                <option *ngFor="let option of prop.options" [value]="option.value">
                  {{ option.label }}
                </option>
              </select>
            </div>
          </div>

          <div *ngSwitchCase="'date'">
            <div class="form-group">
              <input type="date" class="form-control" [formControlName]="prop.name" [id]="prop.input_param_id" [value]="prop.value">
            </div>
          </div>

        </div>

      </div>

      <p>
        <button class="btn btn-success" type="submit">Save</button>
      </p>

    </form>
  </div>
  
</div>

我认为订阅.valueChanges时，我可以通过获取ID来设置表单控件的值。但是我被困在这里。有什么方法可以做这种事情吗？

Answer 1

您可以在表单控件上使用valueChanges方法来侦听更改：

this.form.get('p_acad_id').valueChanges.subscribe(val => {
    //compare value and set other control value
    this.form.get('p_session_id').setValue("Primary")
  });

如何在Angular Reactive窗体中的另一个窗体控件的值更改上更改窗体控件的值？

1 个答案: