使用指令ngModel可以传递数据，使用指令FormControlName可以得到一个空模型

Question

我正在尝试反应形式，但不知道为什么，但是如果我使用ngModel =“ interface.option”指令，则将传递我的值，但是没有此指令。

这是我的html

<div class="container-fluid header-con">
<div class="row">
    <div class="col no-float header-col">
        <div class="container text-center">
            <h1>Sign up it's free!</h1>
        </div>
    </div>
    <div class="col no-float header-col">
        <form (ngSubmit)="onSubmit()" [formGroup]="form">
            <div class="container signup">
                <div class="form-group">
                    <input type="text" class="form-control" formControlName="_name" [ngClass]="{ 'is-invalid': submitted && f._name.errors }" placeholder="Name" required>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" formControlName="_username" [ngClass]="{ 'is-invalid': submitted && f._username.errors }" placeholder="Username" required>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" formControlName="_email" [ngClass]="{ 'is-invalid': submitted && f._email.errors }" placeholder="Email" required>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" formControlName="_password" [ngClass]="{ 'is-invalid': submitted && f._password.errors }" placeholder="Password" required>
                </div>
                <div class="form-group">
                    <button type="submit" [disabled]="!form.valid" class="btn btn-secondary btn-lg btn-block">Sign up</button>
                </div>
            </div>
        </form>
    </div>
</div>

我的组件：

  import { Component, OnInit } from '@angular/core';
import { User } from '../../interfaces/user.interface';
import { Http } from '@angular/http';
import { RestService } from '../../services/rest.service';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

    form: FormGroup;
    submitted = false;
  user: User = {
    _name: '',
    _username: '',
    _email: '',
    _password: ''
    };
  constructor( private _restservice: RestService,
               private http: Http,
               private formBuilder: FormBuilder ) {

                 }

  ngOnInit() {
    this.form = this.formBuilder.group({
      _name: ['', Validators.required],
      _username: ['', Validators.required],
      _email: ['', [Validators.required, Validators.email]],
      _password: ['', [Validators.required, Validators.minLength(8)]]
  });
  }
  get f() { return this.form.controls; }
  onSubmit() {
    this.submitted = true;
    if (this.form.invalid) {
      return;
  } else {
    console.log(this.user);
    this._restservice.newUser ( this.user )
    .subscribe ( data => {
    }); }
  }
  }
}

在通过表单发送我的结果之后，是一个空的json对象：

{   “_名称”： ””，   “_用户名”： ””，   “ _email”：“”，   “ _password”：“” }

我在Formcontroller中做错了什么。

感谢您的帮助。