andrewarosario

@Directive({
  selector: 'form[formGroup][storage]',
})
export class FormStorageDirective implements OnInit, OnDestroy {
  @Input() formGroup: FormGroup;
  @Input() storage: string;
  private destroy$ = new Subject<void>();

  constructor() {}
  ngOnInit(): void {

andrewarosario

<div [formGroup]="form">
  <div>
    <label>Endereço</label>
    <input formControlName="address" />
  </div>
  <div>
    <label>Cidade</label>
    <input formControlName="country" />
  </div>
  

andrewarosario

<div [formGroup]="form">
  <div>
    <label>Nome</label>
    <input formControlName="firstName" />
  </div>
  <div>
    <label>Último nome</label>
    <input formControlName="lastName" />
  </div>
  <div>

andrewarosario

@Component({
  selector: 'app-form-container-step-1',
  templateUrl: './form-container-step-1.component.html',
})
export class FormContainerStep1Component implements OnInit {
  form: FormGroup;

  constructor(private formContainer: FormContainerComponent) {}

  ngOnInit() {

andrewarosario

<form [formGroup]="form">
  <router-outlet></router-outlet>
</form>

andrewarosario

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'step-1',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FormContainerComponent,
    children: [

andrewarosario

@Component({
  selector: 'app-form-container',
  templateUrl: './form-container.component.html',
})
export class FormContainerComponent implements OnInit {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({

andrewarosario

// Forma tradicional
@Component({
  template: '...',
})
export class UserComponent {
  constructor(private userService: UserService) { }
}

// Utilizando a função inject
@Component({

andrewarosario

const usuarioForm = new FormGroup({
  nome: new FormControl('', { nonNullable: true }),
  idade: new FormControl(18, { nonNullable: true }),
  documentos: new FormGroup({
    rg: new FormControl('', { nonNullable: true }),
    cpf: new FormControl('', { nonNullable: true })
  })
});

// <string | undefined>

andrewarosario

const nome = new FormControl('');

// <string | null>
const value = nome.value;

// TypeScript informará erro de tipagem
nome.setValue(10);
  
const nomeNaoNulo = new FormControl('', { nonNullable: true });