CODEWITHSUNDEEP
angularangular5
3gwebtrain
3gwebtrain

Reputation: 15303

`formControlName` - Validation not truthifying the `disabled` sate of the submit button

In my form Validation my formControlName not works as per expected. there is a fileupload field in my form. once the file updated i am expected to enable my submit button. But this is not happening.

here is my component code :

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder, NgForm } from '@angular/forms';

@Component({
  selector: 'app-doc-upload',
  templateUrl: './doc-upload.component.html',
  styleUrls: ['./doc-upload.component.css']
})
export class DocUploadComponent implements OnInit {

    uploadForm:FormGroup;
    fileUpload : File = null;
    uploadedFileName:string = "Select File...";

    constructor(private formbuilder:FormBuilder) {

        this.uploadForm = formbuilder.group({
            fileUpload : ["", [Validators.required]] //added fro enable
        })
    }

    ngOnInit() {
    }

    handleFileInput(files:FileList){

        this.fileUpload = files.item(0);
        this.uploadedFileName = this.fileUpload.name; //works fine
    }

}

my html file:

<h5>Document Upload</h5>
<form [formGroup]="uploadForm" >


<div class="form-group">
<label for="title" class="cols-sm-2 control-label">Document</label>
<div class="cols-sm-10">
<div class="input-group">
    <input type="file" class="custom-file-input" id="exampleInputFile" 
    (change)="handleFileInput($event.target.files)" aria-describedby="fileHelp" formControlName="fileUpload">
    <label class="custom-file-label" for="exampleInputFile">
        {{uploadedFileName}}
    </label>
</div>
</div>
</div>


<div class="row">
    <div class="col-md-6">
        <div class="form-group ">
            <input type="submit" [disabled]="!uploadForm.valid" value="Generate States" class="btn btn-primary btn-lg btn-block login-button">
        </div>
    </div>

</div>

</form>

Upvotes: 0

Views: 577

Answers (2)

Narm
Narm

Reputation: 10844

To add to what @trichetriche has said, it does not appear the Angular team has any intention to add support for <input type="file" ...> with regards to reactive forms as you can see from this Angular GitHub Issue that has been closed regarding the matter.

That being said there are alternatives, personally I've used the following simple approach to validate my file uploads:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dynamic-form',
  template: `
  <form (onsubmit)="submitFile()">
    <input type="file" (change)="onFileUpload($event)">
    <button type="submit" [disabled]="!fileUpload">Submit</button>
  </form>
  `
})
export class DynamicFormComponent {
  public fileUpload: boolean = false;

  constructor() {}

  public onFileUpload(event) {
    //Do any file validation if needed
    this.fileUpload = true;
  }

  public submitFile() {}
}

Upvotes: 0

user4676340
user4676340

Reputation:

I'm not sure you can bind an input of file type to a reactive form. I tell you that after some quick tests.

My way of doing it is to handle the file separately. Since you alredy do, you can simply review the disabled condition of your button : 

<input type="submit" [disabled]="fileUpload" value="Generate States" class="btn btn-primary btn-lg btn-block login-button">

Upvotes: 1

Related Questions