{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/angular/issues/12614","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/12614/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/12614/comments","events_url":"https://api.github.com/repos/angular/angular/issues/12614/events","html_url":"https://github.com/angular/angular/issues/12614","id":186130231,"number":12614,"title":"Change of <input type=\"file\"> doesn't trigger any validators in model driven form approach. ","user":{"login":"MarcinMilewski","id":9371988,"avatar_url":"https://avatars.githubusercontent.com/u/9371988?v=3","gravatar_id":"","url":"https://api.github.com/users/MarcinMilewski","html_url":"https://github.com/MarcinMilewski","followers_url":"https://api.github.com/users/MarcinMilewski/followers","following_url":"https://api.github.com/users/MarcinMilewski/following{/other_user}","gists_url":"https://api.github.com/users/MarcinMilewski/gists{/gist_id}","starred_url":"https://api.github.com/users/MarcinMilewski/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MarcinMilewski/subscriptions","organizations_url":"https://api.github.com/users/MarcinMilewski/orgs","repos_url":"https://api.github.com/users/MarcinMilewski/repos","events_url":"https://api.github.com/users/MarcinMilewski/events{/privacy}","received_events_url":"https://api.github.com/users/MarcinMilewski/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-10-30T11:10:10Z","updated_at":"2016-10-30T11:10:10Z","closed_at":null,"body":"**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[X ] bug report => search github for a similar issue or PR before submitting\r\n[ ] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n**Current behavior**\r\nChanging value of enabled <input type=\"file\"> doesn't trigger any validators. Only need to change type to \"text\" and everything is working as expected.\r\n\r\n**Expected behavior**\r\nChanging value of <input type=\"file\"> should trigger validators. \r\n\r\n**Minimal reproduction of the problem with instructions**\r\n1. View\r\n```\r\n<md-card>\r\n  <md-card-title>Audio test creator</md-card-title>\r\n  <md-card-content>\r\n    <form [formGroup]=\"creationForm\" (ngSubmit)=\"onSubmit(creationForm)\">\r\n      \r\n      <select (change)=\"onChange($event.target.value)\" class=\"custom-select\"      formControlName=\"method\">\r\n        <option value=\"\" selected disabled>Test method</option>\r\n        <option *ngFor=\"let testMethod of testMethods\" [value]=\"testMethod.value\">\r\n          {{testMethod.display}}\r\n        </option>\r\n      </select>\r\n\r\n      <div [formGroup]=\"abxForm\" >\r\n        <input type=\"file\" formControlName=\"soundA\" (change)=\"onInputChange($event.target.value)\">\r\n      </div>\r\n\r\n      <button type=\"submit\" [disabled]=\"!creationForm.valid\">Submit</button>\r\n    </form>\r\n\r\n  </md-card-content>\r\n</md-card>\r\n\r\n```\r\n2. Component class\r\n```\r\nexport class SoundTestCreatorComponent implements OnInit {\r\n\r\n  readonly ABX_SECTION = \"abxForm\";\r\n\r\n  abxForm: FormGroup;\r\n  creationForm : FormGroup;\r\n\r\n  testMethods = [\r\n    {value: SoundTestEnum[SoundTestEnum.ABX], display: SoundTestEnum[SoundTestEnum.ABX]},\r\n    {value: SoundTestEnum[SoundTestEnum.MUSHRA], display: SoundTestEnum[SoundTestEnum.MUSHRA]}\r\n  ];\r\n\r\n  constructor(private fb: FormBuilder) {\r\n    this.creationForm = this.fb.group({\r\n      \"name\": [\"\", Validators.required],\r\n      \"method\": [\"\", Validators.required],\r\n    });\r\n\r\n    this.abxForm = this.fb.group({\r\n      \"soundA\": [\"\", CustomValidators.fileInputRequired]\r\n    });\r\n  }\r\n\r\n  ngOnInit() { }\r\n\r\n  onSubmit(creationForm : any) {\r\n    console.log('Test creation form submitted');\r\n    console.log(creationForm);\r\n  }\r\n\r\n  onChange(selectedMethod : string) {\r\n    this.removeFormSections();\r\n    if(selectedMethod === SoundTestEnum[SoundTestEnum.ABX]) {\r\n      this.addAbxFormSection();\r\n    }\r\n    if(selectedMethod === SoundTestEnum[SoundTestEnum.MUSHRA]) {\r\n    }\r\n    console.log(selectedMethod);\r\n  }\r\n\r\n  private addAbxFormSection() {\r\n    this.creationForm.addControl(this.ABX_SECTION, this.abxForm);\r\n  }\r\n\r\n  private removeFormSections() {\r\n      this.creationForm.removeControl(this.ABX_SECTION);\r\n  }\r\n\r\n  onInputChange(val) {\r\n    console.log(val);\r\n    console.log(this.abxForm.enabled);\r\n  }\r\n```\r\n\r\n3. CustomValidator to check calls.\r\n\r\n```\r\nfunction isEmptyInputValue(value: any) {\r\n  return value == null || typeof value === 'string' && value.length === 0;\r\n}\r\n\r\nexport class CustomValidators {\r\n  static fileInputRequired(c: FormControl) {\r\n    return (isEmptyInputValue(c.value)) ? {\r\n      fileInputRequired: {\r\n        valid: false\r\n      }\r\n    } : null;\r\n  }\r\n}\r\n```\r\n\r\n* **Angular version:** 2.1\r\n\r\n* **Browser:**  ALL\r\n \r\n* **Language:** [ TypeScript 2.0.2 ]\r\n\r\n* **Node (for AoT issues):** `node --version` =   6.0.0\r\n"}}
{"actor":{"display_login":"MarcinMilewski"}}