title: Correct way to initialize input fields for reactive forms & have the control valid
body: <p>The problem here is supposed to be simple but I'm not able to initialize an input field for a reactive form and have that control as valid.</p>
  <p>lets say I have this code:</p>
  <pre><code>@Component({
    selector: 'app-profile-editor',
    templateUrl: './profile-editor.component.html',
    styleUrls: ['./profile-editor.component.css']
  })
  export class ProfileEditorComponent {
    profileForm = this.fb.group({
      firstName: string,
      lastName: string,
  
      address: this.fb.group({
        fName: ['initial value', [Validators.required]],
        city: ['', [Validators.required]],
        state: [''],
        zip: ['']
      }),
    });
  
    constructor(private fb: FormBuilder) { }
  }
  </code></pre>
  <p>And in the template I have lets say:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input [(ngModel)]=&quot;firstName&quot; formControlName=&quot;fName&quot; /&gt;
  </code></pre>
  <p>The problem is that setting the default value this way is not working:</p>
  <pre><code>fName: ['initial value', [Validators.required]],
  </code></pre>
  <p><strong>second way not working:</strong></p>
  <pre><code>fName: new FormControl('initial value', [Validators.required])
  </code></pre>
  <p><strong>third way is</strong> in the template doing this is not working as well:</p>
  <pre><code> &lt;div&gt;
      &lt;input [(ngModel)]=&quot;firstName&quot; formControlName=&quot;fName&quot; [value]=&quot;'default value'&quot;/&gt;
   &lt;/div&gt;
  </code></pre>
  <p><strong>A fourth way to do it is:</strong></p>
  <pre><code>this.address.controls['fName'].setvalue('default value');
  this.address.controls['fName'].updateValueAndValidity();
  </code></pre>
  <p>So when I try all these combination or one of them at a time, and go in the debugger and verify what is the value of: this.address.controls['fName'].value it gives me an empty value --&gt; ''</p>
  <p>as a result even if in my form the field is initially populated and I have to provide the others fields then because of this field my form is not valid I then it's not showing my save button as enabled.</p>
  <p>can some one explain why this behavior or explain what is the right way to go with this ?</p>
  <p>Note: I'm just giving here a small code example as a hint, because my real code is part of a bigger and a proprietary angular 6 application.</p>
  <p><strong>I've to clean up this example but here is one using:</strong>
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot;
  id=&quot;username&quot; formControlName = &quot;username&quot; [(ngModel)]=&quot;name&quot;&gt;</p>
  <p><a href="https://stackblitz.com/edit/angular-reactive-forms-jhg6ds?file=app%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-reactive-forms-jhg6ds?file=app%2Fapp.component.ts</a></p>
  <p>(will update this example later.)</p>
  <p>In this case, the default value is not shown, because I think kind of a concurrency with ngModel content, so I want to set that default value event if the content of ngModel is empty (example when creating a empty form, the user has to find some field already filled (and then valid))</p>