javascript - 如何使几种形式成为一种形式？

Question

我已经设置了几种获取上传逻辑信息的表单：一种是拍照，一种是描述，另一种是设置。现在我希望这一切都存储在一个单一的形式中，但是现在使用不同的形式时它仍然有效，但我收到了这个错误：

错误类型错误：无法读取未定义的属性“控件”

我不知道为什么会这样。我也无法提交我想使用的新描述<div (ngSubmit)="addTag()">

这是我的代码：

html:

<form [formGroup]="categoryForm">
                  <ion-grid class="white">
                  <ion-row class="checkbox-tags rounded-checkbox-tags">
                    <ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
                        <ion-icon name="images"></ion-icon>
                      <ion-checkbox formControlName="tag_1"></ion-checkbox>
                    </ion-item>
                    <ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
                        <ion-icon name="camera"></ion-icon>
                      <ion-checkbox formControlName="tag_2"></ion-checkbox>
                    </ion-item>
                  </ion-row>


                 </ion-grid> 

          <ion-row class="range-item-row">
              <ion-col size="12">
                <div class="range-header">
                  <span class="range-value">{{ rangeForm.controls.dual.value.lower }}</span>
                  <span class="range-label">temperature</span>
                  <span class="range-value">{{ rangeForm.controls.dual.value.upper }}</span>
                </div>
              </ion-col>
              <ion-col size="12">
                <ion-range mode="md" class="range-control" formControlName="dual" color="danger" pin="true" dualKnobs="true" debounce="400"></ion-range>
              </ion-col>
            </ion-row>



<div (ngSubmit)="addTag()"> 
    <ion-item>
      <ion-input [disabled]="tagList?.length > 0" mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
      <ion-button [disabled]="!categoryForm.valid || tagList?.length > 0" type="submit" icon-only>
      <ion-icon name="checkmark"></ion-icon>
    </ion-button>
    </ion-item>
</div>
</form>
  <ion-chip class="chip" color="dark" *ngFor="let tag of tagList; let i = index">
      <ion-icon name="pricetag"></ion-icon>
    <ion-label class="set-label">{{ tag }}</ion-label>
    <ion-icon name="close-circle" (click)="removeChip(i)"></ion-icon>
  </ion-chip>

</ion-content>

<ion-footer>

        <ion-button [disabled]="!tagList?.length > 0" (click)="confirm()" expand="block"  type="submit">POST</ion-button>

  </ion-footer>

打字稿：

categoryForm: FormGroup;  
...
addTag() { // properly access and reset reactive form values
  const tagCtrl = this.categoryForm.get('category');
  if (tagCtrl.value) {
    this.tagList.push(tagCtrl.value);
    this.tagInput = ''; // in order to have an empty input
  }
}

    ngOnInit() {

        this.storage.get('image_data').then((imageFile) => {
          this.imageForm.patchValue({
            'image': this.storage.get('image_data')
          });

        });

        this.categoryForm = new FormGroup({



         'dual': new FormControl({lower: 100, upper: 150}),

          'tag_1': new FormControl(true),
          'tag_2': new FormControl(true),

          'category' : new FormControl('', Validators.compose([
            Validators.maxLength(25),
            Validators.minLength(1),
            Validators.required
          ])),

          'image': new FormControl(null)
        });
    }

标签： javascriptangulartypescriptformsionic-framework