Form output code

after-app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxMaskModule } from 'ngx-mask';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { PersonalInformationFormComponent } from './personal-information/personal-information-form.component';

@NgModule({
	declarations: [AppComponent, PersonalInformationFormComponent],
	imports: [
		BrowserModule,
		SharedModule,
		NgxMaskModule.forRoot({
			validation: true
		}),
		ReactiveFormsModule,
		FormsModule,
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule {}

before-app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxMaskModule } from 'ngx-mask';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
	declarations: [AppComponent],
	imports: [
		BrowserModule,
		SharedModule,
		NgxMaskModule.forRoot({
			validation: true
		}),
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule {}

personal-information-form.component.html

<app-section title="Personal Informations">
  <form
    class="form"
    [formGroup]="this.personalInformationForm"
    name="personal-information-form"
  >
    <div class="row">
      <div class="col-6">
        <app-custom-input label="Name">
          <input
            formControlName="name"
            name="name"
            type="text"
            class="form-control"
            id="input-name" 
            maxLength="80"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Password">
          <input
            formControlName="password"
            name="password"
            type="password"
            class="form-control"
            id="input-password" 
            minLength="6"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Email">
          <input
            formControlName="email"
            name="email"
            type="text"
            class="form-control"
            id="input-email" 
            pattern="^\S+@\S+$"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Age">
          <input
            formControlName="age"
            name="age"
            type="number"
            class="form-control"
            id="input-age" 
            min="0" 
            max="120"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Nationality">
          <input
            formControlName="nationality"
            name="nationality"
            type="text"
            class="form-control"
            id="input-nationality"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="CPF">
          <input
            formControlName="cpf"
            name="cpf"
            type="text"
            class="form-control"
            id="input-cpf" 
            mask="000.000.000-00"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Phone Number">
          <input
            formControlName="phoneNumber"
            name="phone-number"
            type="tel"
            class="form-control"
            id="input-phone-number" 
            mask="(00) 00000-0000"
            appInputRef
          />
        </app-custom-input>
      </div>
      
    </div>
    <div class="row">
      <div class="col-6 d-flex justify-content-start w-25 p-3">
        <button
          type="reset"
          [disabled]="!this.personalInformationForm.touched"
          (click)="onReset()"
          class="btn btn-danger"
          name="reset"
        >
          Reset Form
        </button>
      </div>
      <div class="col-6 d-flex justify-content-end w-25 p-3">
        <button
          type="submit"
          [disabled]="!this.personalInformationForm.valid"
          (click)="onSubmit()"
          name="submit"
          class="btn btn-primary"
        >
          Submit
        </button>
      </div>
    </div>
  </form>
</app-section>

personal-information-form.component.scss

// blank file

personal-information-form.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { PersonalInformationFormComponent } from './personal-information-form.component';

describe('PersonalInformationFormComponent', () => {
  let component: PersonalInformationFormComponent;
  let fixture: ComponentFixture<PersonalInformationFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ PersonalInformationFormComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [
        NoopAnimationsModule,
        ReactiveFormsModule,
        FormsModule
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PersonalInformationFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should compile', () => {
    expect(component).toBeTruthy();
  });
});

personal-information-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators  } from '@angular/forms';
import { PersonalInformationInterface } from './personal-information.model';

@Component({
  selector: 'app-personal-information-form',
  templateUrl: './personal-information-form.component.html',
  styleUrls: ['./personal-information-form.component.scss']
})
export class PersonalInformationFormComponent implements OnInit {
  public personalInformationForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
     this.personalInformationForm = this.initializeForm();
  }

  private initializeForm() {
     return this.fb.group({
       name: [null, [Validators.required] ], 
       password: [null, [Validators.required] ], 
       email: [null, [Validators.required] ], 
       age: [null, [Validators.required] ], 
       nationality: [null], 
       cpf: [null, [Validators.required] ], 
       phoneNumber: [null], 
     })
  }

  onSubmit() {
    console.log(this.getFormValue());
    alert('form submitted');
    alert(JSON.stringify(this.getFormValue()));
  }

  onReset() {
    this.personalInformationForm.reset();
  }

  getFormValue(): PersonalInformationInterface {
    return this.personalInformationForm.value;
  }

  getFormControlValue(formControlName: string) {
    return this.personalInformationForm.get(formControlName).value;
  }
}

personal-information.model.ts

export interface PersonalInformationInterface {
    name: string;
    password: string;
    email: string;
    age: number;
    nationality: string;
    cpf: string;
    phoneNumber: string;
}