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的HTML代码 formGroup是表单的一个实例，一旦其提交的值存储在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>

enter image description here

Answer 1

您只需要使用一次FormBuilder类来获取FormGroup的实例。之后，如果需要动态添加或删除FormControls，可以使用addControl和removeControl方法。

动态更新FormBuilder组输入

1 个答案: