Adding not required fields to formBuilder

Question

On ionic4 project am using form builder to build and validate my forms, and then am using [disbaled] in the form to make the form disabled if not all field valid.

but when I don't add Validators.required to a field, it still treats it as required fields. here are my codes

.ts file

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

as you see image_2 and image_3 does not have the required condition.

in my 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>

the form still disabled even when I fill all fields including image_2 and image_3

Answer 1

Reactive forms are great with basic inputs, but you can't use validators with file inputs.

You have several options de manage this issue, one is to use a hidden input which will contain your validator (Using reactive form validation with <input type="file"> for an Angular app)

Another way to manage it is to use (change) envent : https://medium.com/@amcdnl/file-uploads-with-angular-reactive-forms-960fd0b34cb5