2

I want a user to click a button to upload a document one at a time.

Currently, when a user uploads a document, it does mark the "documents" control as satisfied. However, if the user tries to upload another document but then CANCELS, it marks the control as unsatisfied. It still has the first document, but clicking cancel on the file explorer seems to make the validator think that no document was uploaded. How can I get around this?

in my html:

<input type="file" formControlName="documents" (change)="uploadDocument($event.target.files)">

in my .ts:

this.formGroupName=this.formBuilder.group({
  documents: ['', Validators.compose([Validators.required])]
});

Right now my upoadDocument() function doesn't do anything with the validation.

masu9
  • 491
  • 8
  • 22
  • I think `change` event triggers whenever a user uploads or not and cause of that your `uploadDocument` can triggers twice – epsilon Dec 06 '18 at 15:57
  • So would I have to implement something inside of my uploadDocument function? Can I manipulate whether or not the required field is satisfied manually? – masu9 Dec 06 '18 at 16:01
  • In your app.module.ts did you import: >import { FormsModule } from '@angular/forms'; and did you add FormsModule to your imports? – nuccio Dec 06 '18 at 16:14
  • Yes, imports are set up correctly... I don't think this is an import issue. I'm missing logic somewhere – masu9 Dec 06 '18 at 16:55

1 Answers1

1

So I fixed this myself. What I ended up doing was subscribing to the change event for when I attempted to upload documents, and then based on a few conditions I manually invalidated or validated the Validator.

More on this topic can be found here: How can I manually set an Angular form field as invalid?

masu9
  • 491
  • 8
  • 22