Как изменить значение элемента управления формы при изменении значения другого элемента управления формы в формах Angular Reactive? - PullRequest
Новая
       22

Как изменить значение элемента управления формы при изменении значения другого элемента управления формы в формах Angular Reactive?

0 голосов
/ 17 июня 2019

Я пытаюсь построить динамическую форму на основе структуры 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
        }
      ]
    }

Если я выберу значение «Academic-Year» равным «2018-19», мой второй элемент управления формой, т. Е. Имя сеанса, автоматически заполняется значением «Primary». Вот как я создаю форму:
.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()}}
->

Я думаю, что, подписавшись на .valueChanges, я могу установить значение управления формой, взяв его идентификатор. Но я застрял здесь. Любой способ сделать такую ​​вещь?

1 Ответ

0 голосов
/ 17 июня 2019

Вы можете использовать метод 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")
  });
...