Eu particularmente gosto de utilizar Reactive Forms para o desenvolvimento em Angular. O exemplo de validação que vou aprensentar é utilizando Reactive Forms.
Crie o validator que o Angular utilizará para a validação. No meu caso eu criei a seguinte classe com o validator do CPF.
Lembre-se que o método deve retornar { chave: valor } quando tiver error e null quando não.
export class GenericValidator {
constructor() {}
/**
* Valida se o CPF é valido. Deve-se ser informado o cpf sem máscara.
*/
static isValidCpf(): ValidatorsFn {
return (control: AbstractControl): Validators => {
const cpf = control.value;
if (cpf) {
let numbers, digits, sum, i, result, equalDigits;
equalDigits = 1;
if (cpf.length < 11) {
return null;
}
for (i = 0; i < cpf.length - 1; i++) {
if (cpf.charAt(i) !== cpf.charAt(i + 1)) {
equalDigits = 0;
break;
}
}
if (!equalDigits) {
numbers = cpf.substring(0, 9);
digits = cpf.substring(9);
sum = 0;
for (i = 10; i > 1; i--) {
sum += numbers.charAt(10 - i) * i;
}
result = sum % 11 < 2 ? 0 : 11 - (sum % 11);
if (result !== Number(digits.charAt(0))) {
return { cpfNotValid: true };
}
numbers = cpf.substring(0, 10);
sum = 0;
for (i = 11; i > 1; i--) {
sum += numbers.charAt(11 - i) * i;
}
result = sum % 11 < 2 ? 0 : 11 - (sum % 11);
if (result !== Number(digits.charAt(1))) {
return { cpfNotValid: true };
}
return null;
} else {
return { cpfNotValid: true };
}
}
return null;
};
}
Na criação do formGroup deve-se setar o validator que o Angular utilizará.
export class formComponent implements OnInit {
form: formGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.form = this.formBuilder.group({
cpf: this.formBuilder.control({ value: null, disabled: false}, GenericValidator.isValidCpf())
})
}
}
E depois é só montar o HTML para exibir o erro. Uma forma bem simples para iniciar seria:
<form>
<div>
<label>CPF</label>
<input type="text" formControlName="cpf"/>
</div>
<div *ngIf="form.get('cpf').getError('cpfNotValid')">
O cpf não é válido.
</div>
</form>