title: I cant set default value in input field using angular
body: <p>I cannot set default value in input field and textarea</p>
  
  <p>I Tried to set value for fname and lname but there is no effect when i run it.</p>
  
  <p>I tried with [value]="vignesh" for fname in html file but when i submit it but this.edit_profile_form.value.fname returns an empty string </p>
  
  <p>Please help me out thanks in advance...!!</p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, OnInit, ViewContainerRef} from '@angular/core';
  import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
  import {HomeComponent} from "../../home.component";
  import {HomeService} from "../../../../service/home.service";
  import {ToastsManager} from "ng2-toastr";
  
  @Component({
    selector: 'app-profile-edit',
    templateUrl: './profile-edit.component.html',
    styleUrls: ['./profile-edit.component.css']
  })
  export class ProfileEditComponent implements OnInit {
  
    edit_profile_form:FormGroup;
  
    constructor(public toastr: ToastsManager, vcr: ViewContainerRef,private formBuilder:FormBuilder,public _home:HomeComponent,public _homeService:HomeService) {
      this.toastr.setRootViewContainerRef(vcr);
    }
  
    ngOnInit() {
      this.set_data();
    }
  
    set_data(){
      this.edit_profile_form = this.formBuilder.group({
        fname: new FormControl("Vignesh",[ Validators.minLength(4)]),
        lname: new FormControl(null,[ Validators.minLength(4)]).setValue("vignesh"),
        phone: new FormControl(null),
        address: new FormControl(null,[ Validators.minLength(20),Validators.maxLength(70)]),
        description: new FormControl(null,[Validators.minLength(20),Validators.maxLength(70)]),
        github:new FormControl(null,[]),
        linkedin:new FormControl(null,[]),
        alternate_email: new FormControl(null,[ Validators.email]),
      });
  
      this.edit_profile_form.controls['fname'].setValue(this._home.user_details.first_name);
    }
  
    onSubmit(){
      this._homeService.update_profile(this.edit_profile_form.value.fname,
        this.edit_profile_form.value.lname,
        this.edit_profile_form.value.phone,
        this.edit_profile_form.value.address,
        this.edit_profile_form.value.description,
        this.edit_profile_form.value.github,
        this.edit_profile_form.value.linkedin,
        this.edit_profile_form.value.alternate_email)
        .subscribe(
          (data:any[]) =&gt; {
            if(data[0].d==="success")
            {
              this.toastr.success('User profile updated successfully.', 'Profile Updated', {positionClass:"toast-bottom-right"});
            }
            else
            {
              this.toastr.error('User profile update failed', 'Profile update Failed', {positionClass:"toast-bottom-right"});
            }
          });
    }
  
  }
  </code></pre>
  
  <p>My HTML CODE</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div style="background-color: white;padding: 2%"&gt;
      &lt;div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
            &lt;p style="font-size: 1.5em;padding-left: 10%"&gt;Edit profile&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;div id="main_user_content"&gt;
          &lt;form [formGroup]="edit_profile_form" #edit_profile="ngForm" (ngSubmit)="onSubmit(edit_profile.value)" novalidate&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-5 col-md-offset-1"&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input id="fname" type="text" class="form-control" name="fname"
                             formControlName="fname"
                             placeholder="First Name" ngModel&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['fname'].errors &amp;&amp; (edit_profile_form.controls['fname'].dirty||edit_profile_form.controls['fname'].touched)"&gt;
                      Please enter Your First name
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input id="lname" type="text" class="form-control" name="lname"
                             formControlName="lname"
                             placeholder="Last Name" ngModel&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['lname'].errors &amp;&amp; (edit_profile_form.controls['lname'].dirty||edit_profile_form.controls['lname'].touched)"&gt;
                      Please enter Your Last name
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-inbox"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input id="phone" type="text" class="form-control" name="phone"
                             formControlName="phone"
                             placeholder="Phone" ngModel maxlength="10"&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['phone'].errors &amp;&amp; (edit_profile_form.controls['phone'].dirty||edit_profile_form.controls['phone'].touched)"&gt;
                      &lt;div *ngIf="edit_profile_form.controls['phone'].hasError('minLength')"&gt;
                        &lt;div *ngIf="!(edit_profile_form.controls['phone'].hasError('required'))"
                             class="alert alert-danger"&gt;
                          Please valid phone number
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div *ngIf="edit_profile_form.controls['phone'].hasError('maxLength')"&gt;
                        &lt;div *ngIf="!(edit_profile_form.controls['phone'].hasError('required'))"
                             class="alert alert-danger"&gt;
                          Please valid phone number
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;textarea cols="40" rows="3" id="address" type="text" class="form-control" name="address"
                                formControlName="address"
                                placeholder="Address" ngModel&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['address'].errors &amp;&amp; (edit_profile_form.controls['address'].dirty||edit_profile_form.controls['address'].touched)"&gt;
                      &lt;div *ngIf="edit_profile_form.controls['address'].hasError('required')"
                           class="alert alert-danger"&gt;
                        Please enter Your Address
                      &lt;/div&gt;
                      &lt;div *ngIf="edit_profile_form.controls['address'].hasError('minLength')"&gt;
                        &lt;div *ngIf="!(edit_profile_form.controls['address'].hasError('required'))"
                             class="alert alert-danger"&gt;
                          Please valid address of length greater than 20
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div *ngIf="edit_profile_form.controls['address'].hasError('maxLength')"&gt;
                        &lt;div *ngIf="!(edit_profile_form.controls['address'].hasError('required'))"
                             class="alert alert-danger"&gt;
                          Please valid address of length less than 70
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-5 col-md-offset-1"&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-comment"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;textarea cols="40" rows="3" id="description" type="text" class="form-control" name="description"
                                formControlName="description"
                                placeholder="Description" ngModel&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['description'].errors &amp;&amp; (edit_profile_form.controls['description'].dirty||edit_profile_form.controls['description'].touched)"&gt;
                      &lt;div *ngIf="edit_profile_form.controls['description'].hasError('required')"
                           class="alert alert-danger"&gt;
                        Please enter Your Description
                      &lt;/div&gt;
                      &lt;div *ngIf="edit_profile_form.controls['description'].hasError('minLength')"&gt;
                        &lt;div *ngIf="!(edit_profile_form.controls['description'].hasError('required'))"
                             class="alert alert-danger"&gt;
                          Please valid description of length greater than 20
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div *ngIf="edit_profile_form.controls['description'].hasError('maxLength')"&gt;
                        &lt;div *ngIf="!(edit_profile_form.controls['description'].hasError('required'))"
                             class="alert alert-danger"&gt;
                          Please valid description of length less than 70
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-inbox"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input id="github" type="text" class="form-control" name="github"
                             formControlName="github"
                             placeholder="Github URL Eg:https://github.com/mike" ngModel&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['github'].errors &amp;&amp; (edit_profile_form.controls['github'].dirty||edit_profile_form.controls['github'].touched)"&gt;
                      &lt;div *ngIf="edit_profile_form.controls['github'].hasError('required')"
                           class="alert alert-danger"&gt;
                        Please enter the Github URL
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-inbox"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input id="linkedin" type="text" class="form-control" name="linkedin"
                             formControlName="linkedin"
                             placeholder="Linkedin URL  Eg:https://linkedin.com/mike" ngModel&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['linkedin'].errors &amp;&amp; (edit_profile_form.controls['linkedin'].dirty||edit_profile_form.controls['linkedin'].touched)"&gt;
                      &lt;div *ngIf="edit_profile_form.controls['linkedin'].hasError('required')"
                           class="alert alert-danger"&gt;
                        Please enter the Linkedin URL
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row" style="margin-top: 5%"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input id="alternate_email" type="text" class="form-control" name="alternate_email"
                             formControlName="alternate_email"
                             placeholder="Alternate Email" ngModel [value]=""&gt;
                    &lt;/div&gt;
                    &lt;div *ngIf="edit_profile_form.controls['alternate_email'].errors &amp;&amp; (edit_profile_form.controls['alternate_email'].dirty||edit_profile_form.controls['alternate_email'].touched)"&gt;
                      &lt;div *ngIf="edit_profile_form.controls['alternate_email'].hasError('required')"
                           class="alert alert-danger"&gt;
                        Please enter the Alternate Email address
                      &lt;/div&gt;
                      &lt;div *ngIf="edit_profile_form.controls['alternate_email'].hasError('email')"&gt;
                        &lt;div *ngIf="!(edit_profile_form.controls['alternate_email'].hasError('required'))"
                             class="alert alert-danger"&gt;
                          Please valid Alternate email address
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-1 col-md-offset-4"&gt;
                &lt;button type="submit" class="btn btn-primary" &gt;Invite&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-md-1 col-md-offset-1"&gt;
                &lt;button type="button" class="btn btn-default" &gt;Close&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>