angular - Lägga till icke obligatoriska fält i formBuilder

I ett ionic4-projekt använder jag form builder för att bygga och validera mina formulär, och sedan använder jag [disbaled] i formuläret för att göra formuläret inaktiverat om inte alla fält är giltiga.

men när jag inte lägger till Validators.required till ett fält, behandlas det ändå som obligatoriska fält. här är mina koder

.ts-fil

    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: [''],
        });
    }

som du ser har image_2 och image_3 inte det krävd villkoret.

i min 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>

formuläret är fortfarande inaktiverat även när jag fyller i alla fält inklusive image_2 och image_3

Svar #1

Reaktiva formulär är bra med grundläggande inmatningar, men du kan inte använda validatorer med filinmatningar.

Du har flera alternativ för att hantera detta problem, ett är att använda ett dolt inputfält som kommer att innehålla din validator (Använda reaktiv formulärvalidering med för en Angular-app)

Ett annat sätt att hantera det är att använda (ändra) event: https://medium.com/@amcdnl/file-uploads-with-angular-reactive-forms-960fd0b34cb5