andrewarosario

@Component({
  selector: 'app-modal',
  template: `
    <button 
      [routerLink]="[]" 
      [queryParams]="{isOpen: true}">
      Abrir Modal
    </button>

    <nz-modal 

andrewarosario

<form [formGroup]="form">
  <input formControlName="username" />
  <span *ngIf="form.controls.username.pending">Estamos consultando este nome...</span>
  <span *ngIf="form.controls.username.hasError('uniqueName')">Este nome já está sendo utilizado por outro usuário!</span>
</form>

andrewarosario

export class FormComponent {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      username: ['', forbiddenNameValidator(/bob/i)],
    });
  }
}

andrewarosario

import { AsyncValidatorFn, FormControl } from '@angular/forms';
import { map } from 'rxjs/operators';

export function uniqueNameValidator(userService: UserService): AsyncValidatorFn {
    return (control: FormControl<string>) => {
        return userService.getByName(control.value).pipe(
            map((isTaken) => (isTaken ? { uniqueName: true } : null)),
        );
    };
}

andrewarosario

export class FormComponent {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder, userService: UserService) {
    this.form = this.formBuilder.group({
      username: ['', forbiddenNameValidator(/bob/i), [uniqueUserValidator(userService)]],
    });
  }
}

andrewarosario

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        const forbidden = nameRe.test(control.value);
        return forbidden ? { forbiddenName: { value: control.value } } : null;
    };
}

andrewarosario

<form [formGroup]="form">
  <input formControlName="username" />
  <span *ngIf="form.controls.username.hasError('required')">Este campo é obrigatório!</span>
</form>

andrewarosario

export class FormComponent {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      username: ['', trimmedRequiredValidator],
    });
  }
}

andrewarosario

import { FormControl, ValidationErrors } from '@angular/forms';

export function trimmedRequiredValidator(control: FormControl<string>): ValidationErrors | null {
    return !control.value || (control.value && control.value.trim() == '') ? { required: true } : null;
}

andrewarosario

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
})
export class FormComponent {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder, userService: UserService) {
    this.form = this.formBuilder.group({
      username: ['', Validators.required, [uniqueUserValidator(userService)]],
      email: ['', [Validators.required, Validators.email]],