向 formBuilder 添加不需要的字段

Question

在 ionic4 项目中，我正在使用表单生成器来构建和验证我的表单，然后在表单中使用 [disbaled] 来禁用表单（如果不是所有字段都有效）。

但是当我不将 Validators.required 添加到字段时，它仍然将其视为必填字段。这是我的代码

.ts 文件

    createAddAtelierDressForm() {
        this.addAtelierDressForm = this.fb.group({
            title: ['', Validators.required],
            description: ['', Validators.required],
            type: ['', Validators.required],
            size: ['', Validators.required],
            category: ['', Validators.required],
            city: ['', Validators.required],
            action: ['', Validators.required],
            price: ['', Validators.required],
            discount: ['', Validators.required],
            image_1: ['', Validators.required],
            image_2: [''],
            image_3: [''],
        });
    }

如您所见，image_2和image_3不具备要求的条件。

在我的HTML

            <form [formGroup]="addAtelierDressForm">
                <ion-item>
                    <ion-label position="stacked">Title</ion-label>
                    <ion-input formControlName="title" type="text"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">Description</ion-label>
                    <ion-input formControlName="description" type="text"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">Type</ion-label>
                    <ion-select formControlName="type" type="select">
                        <ion-select-option *ngFor="let type of allTypes">{{type.name}}
                        </ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">Size</ion-label>
                    <ion-select formControlName="size" type="select">
                        <ion-select-option *ngFor="let size of allSizes">{{size.name}}
                        </ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">Category</ion-label>
                    <ion-select formControlName="category" type="select">
                        <ion-select-option *ngFor="let category of allCategories">{{category.name}}
                        </ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">City</ion-label>
                    <ion-select formControlName="city" type="select">
                        <ion-select-option *ngFor="let city of allCities">{{city.name}}
                        </ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">Action</ion-label>
                    <ion-select formControlName="action" type="select">
                        <ion-select-option *ngFor="let action of allActions">{{action.name}}
                        </ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">Original Price</ion-label>
                    <ion-input formControlName="price" type="number"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">Discount %</ion-label>
                    <ion-select formControlName="discount" type="select">
                        <ion-select-option *ngFor="let discount of allDiscounts">{{discount.amount}}
                        </ion-select-option>
                    </ion-select>
                </ion-item>

                <ion-item>
                    <ion-label >Image 1</ion-label>
                    <ion-input formControlName="image_1" type="file" (change)="fileChange1($event)"></ion-input>
                    <img *ngIf="img1" [src]="img1" style="width: 100px; height: 100px;"/>
                </ion-item>
                <ion-item>
                    <ion-label >Image 2</ion-label>
                    <ion-input formControlName="image_2" type="file" (change)="fileChange2($event)"></ion-input>
                    <img *ngIf="img2" [src]="img2" style="width: 100px; height: 100px;"/>
                </ion-item>
                <ion-item>
                    <ion-label >Image 3</ion-label>
                    <ion-input formControlName="image_3" type="file" (change)="fileChange3($event)"></ion-input>
                    <img *ngIf="img3" [src]="img2" style="width: 100px; height: 100px;"/>
                </ion-item>
                <ion-button expand="full" type="submit" [disabled]="!addAtelierDressForm.valid">Add Dress</ion-button>
            </form>

即使我填写了包括 image_2 和 image_3

在内的所有字段，表单仍然被禁用

Answer 1

响应式表单非常适合基本输入，但您不能对文件输入使用验证器。

你有几个选项来解决这个问题，一个是使用隐藏的输入，其中将包含你的验证器 ()

另一种管理它的方法是使用（更改）环境：https://medium.com/@amcdnl/file-uploads-with-angular-reactive-forms-960fd0b34cb5

向 formBuilder 添加不需要的字段

Adding not required fields to formBuilder

typescript

ionic-framework

angular

ionic4