i am trying to make a custom validator in angular cli 4.5.5 Some parts of my form only need to be validated when a checkbox is checked. i don't seem to get it working. Here is my validator code:
export function validateCheckbox(control:AbstractControl){
const val = control.value;
const check = control.root.get('checkbox');
if (check) {
if (val === null || val === undefined || val === '') {
return {
validateDays: {
valid: false
}
};
}else{
return null;
}
}else{
return null;
}
}
Here is my component code:
@Component({
selector: 'caredeal-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class RegistrationComponent implements OnInit {
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.registerForm = this.formBuilder.group({
name:['',Validators.required,Validators.minLength(2)],
firstName:['',Validators.required,Validators.minLength(2)],
email:['', Validators.required,Validators.minLength(2)],
telephone:['',Validators.required,Validators.minLength(9)],
mobilePhone:['',Validators.minLength(10)],
type:[''],
checkbox:[false],
companyName:['',Validators.minLength(2)],
rizivNumber:[''],
taxNumber:['',Validators.minLength(2)],
streetName:['', Validators.required],
houseNumber:['',validateCheckbox],
bus:[''],
zipCode:['',Validators.required,Validators.minLength(4)],
place:['',Validators.required,Validators.minLength(2)],
})
}
ngOnInit() {
}
}
My html code:
<form [formGroup]="registerForm" (ngSubmit)="onFormSubmit()">
<div class="container-fluid">
<h3>Account informatie</h3>
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" formControlName="name" placeholder="Naam">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" formControlName="firstName" placeholder="Voornaam">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="email" class="form-control" formControlName="email" placeholder="Email">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="tel" class="form-control" formControlName="telephone" placeholder="Telefoon">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="tel" class="form-control" formControlName="mobilePhone" placeholder="GSM">
</div>
<div class="input-group">
<label for="sel1">Type klant:</label>
<select class="form-control" formControlName="type">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<h3>Bedrijfsgegevens</h3>
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" formControlName="companyName" placeholder="Bedrijfsnaam">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="number" class="form-control"formControlName="rizivNumber" placeholder="RIZIV-nummer">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" formControlName="taxNumber" placeholder="BTW-nummer">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<h3>Afleveradres</h3>
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input type="text" class="form-control" formControlName="streetName" placeholder="Straatnaam">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
<input type="number" class="form-control" formControlName="houseNumber" placeholder="Huisnummer">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="text" class="form-control" formControlName="bus" placeholder="Bus">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="number" class="form-control" formControlName="zipCode" placeholder="Postcode">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="text" class="form-control" formControlName="place" placeholder="Plaats">
</div>
<div class="input-group">
<input type="checkbox" formControlName="checkbox" name="">Facturatie adres is verschillend van afleveradres<br>
</div>
<div class="input-group">
<button type="submit" [disabled] = "!registerForm.valid" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</form>
My checkbox is in the end of my html code. At the moment i am getting this error: Expected validator to return Promise or Observable.
I think that your problem is not related to your custom validator. You are passing certain validators as async validators while they are not async.
Please take a look at FormControl constructor documentation.
Try replacing lines like email:['', Validators.required,Validators.minLength(2)], with email:['', [Validators.required,Validators.minLength(2)]],