動態更新FormBuilder組輸入

Question

When FormGroup instance is created it creates a FormGroup object that has controls and values.
I have one form that has different controls, they activate depending on what type of form was chosen.
The problem is that formGroup instance stays same, so my controls are not read, and I am getting an error that controls are not found.

我將包括task.component.ts文件，在其中我更新任務並將值讀入輸入字段：

upateTaskForm(taskBody, taskType) {
    this.formActive = true;
    if (this.task === 'medication') {
      console.log(this.formGroup + "MEDICATION FORMGROUP");
      this.formGroup = this.formBuilder.group({
        title: taskBody.title,
        instructions: taskBody.instructions,
        repeatWeekDay: [null],
        medication: this.formBuilder.group({
          name: taskBody.medication[0].name,
          dose: this.formBuilder.group({
            quantity: taskBody.medication[0].quantity,
            unit: taskBody.medication[0].dose.unit
          }),
          method: taskBody.medication[0].method,
          notes: taskBody.medication[0].notes
        })
      });
      // Reading Form populates from the formbuilder
    } if (this.task === 'reading') {
      console.log(this.formGroup + "READING FORMGROUP");
      this.formBuilder.group({
        title: taskBody.title,
        reading: this.formBuilder.group({
          measureType: taskBody.reading[0].measureType,
          measureValue: taskBody.reading[0].measureValue,
          measureUnits: taskBody.reading[0].measureUnits,
        }),
        instructions: taskBody.instructions,
      });
    } else if (this.task === 'symptoms') {
      this.formGroup = this.formBuilder.group({
        title: [null, Validators.required],
        instructions: [null]
      });
    }
  }

這是task.component.html formGroup的HTML代碼。表單組的提交值存儲在formGroup.value中后，formGroup從庫名稱事件處理中的庫搜索任務中復制。

                <label class="form-check-label d-block d-md-inline">
                  <input type="radio" class="form-check-input" (click)="setTask('reading')" name="event" [checked]='task==="reading"' value="measurement"> Measurement</label>

                <label class="form-check-label d-block d-md-inline">
                  <input type="radio" class="form-check-input" (click)="setTask('record-symptoms')" name="event" [checked]='task==="symptoms"'
                    value="symptoms"> Record Syptoms</label>
              </div>
            </div>

            <!-- Medication Form -->
            <div id="medicationForm" formArrayName="medication" *ngIf="task==='medication'">
              <div class="form-group row mx-auto mt-4" formArrayName="dose">

                <label class="col-md-3" for="response">Dose</label>
                <input type="number" name="number" class="form-contol col-md-6 mr-4" placeholder="Quantity" formControlName="quantity">
                <select class="col" formControlName="unit">
                  <option default>Tablet(s)</option>
                  <option>Pill</option>
                  <option>Liquid</option>
                </select>

              </div>

              <div class="form-group row mx-auto mt-4">
                <label class="col-md-3"></label>
                <input type="text" class="form-contol col-md-6 mr-4" placeholder="Unit / eg Melformin 500mg" formControlName="name">
                <select class="col" formControlName="method">
                  <option default>Oral</option>
                  <option>IV</option>
                  <option>Tropical</option>
                  <option>ophthalmic</option>
                </select>
              </div>

              <div class="form-group row mx-auto mt-4">
                <label for="notes" class="col">Notes</label>
                <input type="text" name="notes" class="form-control col-md-9 ml-auto" placeholder="Take before bed, take before eating" formControlName="notes">
              </div>
            </div>

            <!-- Measurement Form -->
            <div id="measurementForm" *ngIf="task==='reading'" formArrayName="reading" >
              <div class="form-group row mx-auto mt-4">
                <label class="col-md-3">Measurement Type</label>
                <input type="text" class="form-contol col" placeholder="Heart_rate, Systolic, Diastolic, Weight" formControlName="measureType">
              </div>

              <div class="form-group row mx-auto mt-4">
                <label class="col-md-3" for="response">Measurement Value</label>
                <input type="number" class="form-contol col-md-6 mr-4" placeholder="Value of the measurement" formControlName="measureValue">
                <select class="col" formControlName="measureUnits">
                  <option default>KG</option>
                  <option>LBS</option>
                  <option>mmHg</option>
                  <option>MG/DL</option>
                  <option>MMOL</option>
                  <option>STEPS</option>
                </select>
              </div>
            </div>

            <div class="form-group row mx-auto">
              <label class="col" for="instructions">Instructions</label>
              <input class="form-control col-md-9 ml-auto" type="text" formControlName="instructions" placeholder="Anything to say to the patient">
            </div>
            <div class="modal-footer my-3">
              <button class="d-none d-md-block btn btn-secondary btn-sm btn-md-lg mr-auto ml-md-4" data-dismiss="modal">CANCEL</button>
              <button class="d-md-none btn btn-secondary btn-sm btn-md-lg mr-auto ml-md-4" data-dismiss="modal">&times;</button>
              <button type="submit" class="d-none d-md-block btn btn-primary btn-sm btn-md-lg mr-md-4">CREATE TASK</button>
              <button class="d-md-none btn btn-primary btn-sm btn-md-lg mr-md-4">OK</button>
            </div>
          </form>

在此處輸入圖片說明

Answer 1

您只需要使用FormBuilder類一次即可獲取FormGroup的實例。 此后，如果需要動態添加或刪除FormControl，則可以使用addControl和removeControl方法。