Fine Giorno 1 - Academy Angular 2 (sporco)

fine-day1-academy-angular2-sporco.ts

import { Component, ViewChild } from '@angular/core';
import {
  AbstractControl,
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  FormGroupDirective, NgForm, ValidationErrors, ValidatorFn,
  Validators
} from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';

// group validator
// cross-field validation
function credentials(forbiddenName: string, forbiddenSurname: string): ValidatorFn {
  return (c) => {
    const name = c.get('name');
    const surname = c.get('surname');

    const isForbiddenName = name && name.value === forbiddenName;
    const isForbiddenSurname = surname && surname.value === forbiddenSurname;

    if (isForbiddenName && isForbiddenSurname) {
      return {
        credentials: `L'utente ${forbiddenName} ${forbiddenSurname} non è il benvenuto.`
      }
    }
    return null;
  }
}

export class MyErrorStateMatcher implements ErrorStateMatcher {

  isErrorState(control: FormControl | null): boolean {
    return control?.parent?.invalid || false;
  }
}

@Component({
  selector: 'app-home',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">

      <mat-form-field>
        <mat-label>Nome</mat-label>
        <input [errorStateMatcher]="matcher" type="text" matInput formControlName="name" placeholder="name">
        <mat-error>
          Errore
        </mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Cognome</mat-label>
        <input [errorStateMatcher]="matcher" type="text" matInput formControlName="surname" placeholder="surname">
        <mat-error>
          Errore
        </mat-error>
      </mat-form-field>


<!--      <input type="text" formControlName="name" placeholder="name">-->
<!--      <input type="text" formControlName="surname" placeholder="surname">-->

      <div formArrayName="addresses">
        <div class="phone" *ngFor="let address of addresses.controls; let i = index">
          <div [formGroupName]="i">
            <input type="text" formControlName="city" placeholder="city">
            <input type="text" formControlName="street" placeholder="street">
            <input type="text" formControlName="nr" placeholder="nr">
          </div>
          <button (click)="removeAddress(i)">-</button>
        </div>
      </div>

      <p *ngIf="addresses.hasError('maxArray')">{{ addresses.getError('maxArray') }}</p>
      <p *ngIf="userForm.hasError('credentials')">{{ userForm.getError('credentials') }}</p>

      <button type="button" (click)="addAddress()">+</button>
      <button>Invia</button>
    </form>
    <br>form: {{ userForm.status }}
  `,
  styles: [`
    .phone {
      margin: 5px;
      background: rgba(0,0,0,.2);
    }
  `]
})
export class HomeComponent {

  matcher = new MyErrorStateMatcher();

  userForm = this.fb.group({
    name: 'michele',
    surname: 'stieven',
    addresses: this.fb.array([])
  }, {
    validators: credentials('michele', 'stieven')
  })

  get name() {
    return this.userForm.get('name')!;
  }

  get addresses() {
    return this.userForm.get('addresses')! as FormArray;
  }

  constructor(private fb: FormBuilder) {
  }

  onSubmit() {
    console.log(this.userForm.value);
  }

  removeAddress(i: number) {
    this.addresses.removeAt(i);
  }

  addAddress() {
    this.addresses.push(this.fb.group({
      city: '',
      street: '',
      nr: ''
    }))
  }

}