I have a form with two fields...one is a group of 3 checkboxes (out of which one must be selected) and the other is input type as file.(which must be selected). I am using reactive form custom validators for them and only after providing poper values to the form, I have to enable the submit button. But the validators don't seem to be working.
HTML page :
<input type="file" id="selectFile" #selectFile accept=".zip" formControlName ="fileUpload" name="file" class="form-control" class="btn" value="file" required />
<span *ngFor="let tool of toolTypeList">
<label class="checkbox-inline col-md-2 " style = "text-align: left;padding-left:35px">
<input type="checkbox" formControlName ="selectTool"
name="{{tool.toolType}}"
value="{{tool.toolType}}"
(change)="change($event, tool)">
{{tool.toolType}}
</label>
</span>
Component :
this.rForm = fb.group({
'selectTool': new FormControl('', [
Validators.required,
this.validateTools
]),
' fileUpload': new FormControl('', [
Validators.required,
this.noFilePresent
]),
});
Validators:
noFilePresent(): Boolean {
if (this.fileuploaded.size <= 0) {
return true;
}
return false;
}
validateTools(c: AbstractControl) {
console.log('here in custom validator : ' + c.value);
let response: any = null;
if (c.value == null) {
response = this.selectedTools.length > 0 ? null : {
validateTools: {
valid: false
}
};
}
I assume for fileUpload field, the validator created is wrong in its structure as no formcontrol object is passed as parameter. But with presumably correct structure of checkbox (selectTool) validator, It's not working. Please help me find my mistake. Thanks in advance.