How to make an image compulsory ? (Ensure it is entered by user)

Ionic Framework ionic-v3
1

Hello dear Ionic friends :smiley:

I am making a form, this form contains text (name, age…) and one image.
Right now I can make sure the text are necessary by using a FormGroup but I would like to make sure that the form is valid ONLY IF the image is entered.

So I tried this way: (HTML file)

 <input   formControlName="photo" type="file" (click)="selectImage()">

TS FILE:

 ngOnInit() {
    this.sellingSneakForm = new FormGroup({
      photo: new FormControl('', [Validators.required]),
    });
  }

  selectImage() {

    let actionSheet = this.actionSheetCtrl.create({
      title: 'Add an image',
      buttons: [
        {
          text: 'Take a picture from camera',
          role: 'CAMERA',

          handler: () => {
            this.takePicture();
          }
        },
        {
          text: 'Choose from your gallery',
          role: 'GALLERY',

          handler: () => {
            this.selectPicture();
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {

          }
        }
      ]
    });
    actionSheet.present();
  }


  takePicture() {
    this.camera.getPicture({
      quality : 95,
      destinationType : this.camera.DestinationType.DATA_URL,
      sourceType : this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.JPEG,
      targetWidth: 500,
      targetHeight: 500,
    }).then(imageData => {
      this.base64Image = "data:image/jpeg;base64," + imageData;      // imageData is a base64 encoded string
      this.Picture = imageData;       //this.Picture is passing the string to our DB
    }, error => {
      console.log("ERROR -> " + JSON.stringify(error));
    });
  }

It is working 100% when I upload the image but my app does not need the image to push the item to the database… What I would like with this FormGroup and FormControl.

Is it possible this way ?

Thanks

2

I am trying an other way at the same time like: uploading the image only if the field item.picture is not empty but it does not work as I need the key of the item when uploading (and I don’t want to upload it before it has entered an image…)

So a kind of form control would be appreciated if someone knows it’s existence

3

you can create one input type hidden with formControlName of imageValidate if control imageValidate is empty that means user did not uploaded so validation error. when user upload then patchValue on imageValidate. Let him submit the form.