Import module:

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { MessageComponent } from './message.component';import messageRoutes from './message.routes';import {FormsModule, ReactiveFormsModule} from "@angular/forms";@NgModule({  imports: [    CommonModule,    FormsModule,    ReactiveFormsModule,    messageRoutes  ],  declarations: [MessageComponent]})export default class MessageModule { }

 

Define the html:

     
  
      
    
       Title:    
         
      
  
      
    
       Description:    
         
      
  
      
    
       Submit  
      
     

 

ts:

reactiveForm: FormGroup;

constructor(fb: FormBuilder) {    this.reactiveForm = fb.group({      title: [        'Title',        [          Validators.required,          Validators.minLength(3)        ]      ],      description: [        'Description',        [Validators.required]      ]    })  }}

group() function take an object param, each object stands for a field in template, which refer to 'formControlName'.

// title <-- formControlName="title"      title: [        'Title', // <-- Default value        [          Validators.required,          Validators.minLength(3)        ] // <-- Validations      ],