default value of form control doesn't show

Question

I am trying to give any formcontrol 's in my whole project a default value, It doesn't show in the html. Here is an example:

this my ts file

 import {FormBuilder, FormGroup, FormArray, Validators, NgForm} from   
 '@angular/forms';

template = this.fb.group({
templateName: ['name', [Validators.required]]})
constructor(private fb: FormBuilder){}

my html

  <form [formGroup]="template" #formDirective="ngForm" class="col-lg-4 col-md-4 col-con">

          <input matInput placeholder="Template Name"
   maxlength="255" formControlName="templateName" value=""
                 required>
   </form>

my module

    imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpClientModule,
AppRoutingModule,
RouterModule,
ReactiveFormsModule]

Answer 1

just remove this attribute value=""

 <form [formGroup]="template" #formDirective="ngForm" class="col-lg-4 col-md-4 col-con">
     <input matInput placeholder="Template Name"   formControlName="templateName"  >
 </form>

I'm also recommend to remove maxlength="255",required and use Validators.required and Validators.maxLength

templateName: ['name', [Validators.required,Validators.maxLength(255)]]

Answer 2

Or you can add ngValue

<input matInput placeholder="Template Name"
   maxlength="255" formControlName="templateName" [ngValue]="name" required>