title: Reactive Forms - Set the input of selected <option> of a <select> FormControl dynamically by condition
body: <p>I need to set two inout value depending on select option in </p>
  
  <p>I have an array with the options and when the user select one option in  the input have to set with other option of the array.
  Example: When I select the option  "Risco de alergias", one input have set to "Orientar o paciente a sempre informar as alergias em caso de troca de coberturas e medicamentos." and other input have set to "Paciente não devera apresentar alergias durante a execução do tratamento" values of the array riscos</p>
  
  <p><a href="https://stackblitz.com/edit/angular-lii4rh" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-lii4rh</a></p>
  
  <p><strong>component.ts</strong> </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms'
  
  
  @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
      planoCuidadosForm: FormGroup;
      risco: FormArray;
  
  
      riscos = [
          {
              Risco: "Risco de alergias",
              Cuidados:
              "Orientar o paciente a sempre informar as alergias em caso de troca de coberturas e medicamentos.",
              Resultado:
              "Paciente não devera apresentar alergias durante a execução do tratamento"
          },
          {
              Risco: "Risco de baixa autoestima ",
              Cuidados:
              "Promover conforto psicológico ao paciente visando a promoção da autoestima",
              Resultado:
              "Paciente não devera apresentar alterações da autoestima durante a execução do tratamento"
          },
          {
              Risco: "Risco de distúrbio na identidade pessoal",
              Cuidados:
              "Auxiliar o paciente no processo de aceitação com as condições atuais",
              Resultado:
              "Paciente não devera apresentar disturbios na identidade pessoal durante a execução do tratamento"
          }
      ];
  
      constructor(
          private datePipe: DatePipe,
          private fb: FormBuilder,
      ) { }   
  
      ngOnInit() {
          this.createFormPlanos();
      }
  
      createFormPlanos() {
          this.planoCuidadosForm = this.fb.group({
              planoDeCuidadosId: [null],
              evolucao: [null],
              riscos: this.buildRiscos(),
          });
  
      }
  
      buildRiscos() {
          return this.fb.array([
              this.fb.group({
              Risco: "",
              Cuidados: "",
              Resultado: ""
              })
          ]);
      }
  
      addRiscos(): void {
          this.risco = this.planoCuidadosForm.get("riscos") as FormArray;
          this.risco.push(this.buildRiscos());
      }
  
      get getRiscos(): FormArray {
          return this.planoCuidadosForm.get('riscos') as FormArray;
      }
  
      selRiscos(event: any) {
          console.log("Risco: ", event.target.value)
  
          const id = this.riscos.find(r =&gt; r.Risco == event.target.value);
          console.log("Id: ", id);
  
          (this.planoCuidadosForm.get(['riscos']) as FormArray)
          .patchValue([{ Risco: id.Risco, Cuidados: id.Cuidados, Resultado: id.Resultado }]);
  
      }
  
  }
  </code></pre>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;form class="form-horizontal ml-2 mr-2 mt-2" [formGroup]="planoCuidadosForm" (ngSubmit)="onSubmitPlanoCuidados()"&gt;
      &lt;div class="form-row"&gt;
          &lt;div class="form-group col-md-12"&gt;
              &lt;label for="evolucao"&gt;Evolução:&lt;/label&gt;
              &lt;textarea class="form-control" id="evolucao" rows="3" formControlName="evolucao"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div formArrayName="riscos" class="form-group col-md"&gt;
          &lt;table class="table table-hover"&gt;
              &lt;thead&gt;
                  &lt;tr class="bg-primary text-light"&gt;
                      &lt;th style="width: 20%"&gt;Riscos&lt;/th&gt;
                      &lt;th style="width: 40%"&gt;Cuidados Relacionados aos riscos&lt;/th&gt;
                      &lt;th style="width: 30%"&gt;Resultado Esperado&lt;/th&gt;
                      &lt;th style="width: 5%"&gt;
                      &lt;button type="button" class="btn btn-sm btn-primary flex-end mt-auto" (click)="addRiscos()"&gt;
                      &lt;i class="fas fa-plus"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr class="table-light" *ngFor=" let item of getRiscos.controls;let i = index;"&gt;
                      &lt;td&gt;
                          &lt;select class="form-control" [formControlName]="i" (change)="selRiscos($event)"&gt;
                              &lt;option [value]="null"&gt; -- Selecione -- &lt;/option&gt;
                              &lt;option *ngFor="let opcao of riscos;let op = index;" value="riscos.Risco"&gt; {{opcao.Risco }} &lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="text" class="form-control" formControlName="Cuidados" id="Cuidados" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="text" class="form-control" formControlName="Resultado" id="Resultado" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  </code></pre>