2017-02-15 22 views
0

在angular2中,我正在尝试将数据加载到我的输入的新方法。我正在使用formgroup,这样我可以保持我的HTML清洁,并在组件ts文件中有更多的验证逻辑。我的代码呈现表单元素如下: -在通过服务承诺加载formgroup值时,md-input占位符不会消失

constructor(private _fb: FormBuilder, private userService: UsersService, 
     private router: Router, private accountRoutes: AccountRoutes) { 
     this.myForm = 

      this.myForm = this._fb.group({ 
       user: this._fb.group({ 
        "EmailAddress": [null, Validators.compose([ 
         Validators.required 
        ])] 
       }) 
      }); 

    } 
ngOnInit() { 

     this.userService.GetUser().subscribe(
      (response) => { 
       this.user = { 
        EmailAddress: "[email protected]",//response.EmailAddress, 
        FirstName: response.FirstName, 
        MiddleName: response.MiddleName, 
        Surname: response.Surname, 
        Password: "", 
        ConfirmPassword: "" 
       }; 
       this.myForm.controls["user"].setValue(this.user, { onlySelf: true }); 
      }); 

}); }

和HTML代码如下:

<md-card-content fxLayout="column" formGroupName="user"> 
    <md-input-container> 
    <input md-input placeholder="Email" formControlName="EmailAddress" 
           type="email" name="EmailAddress" /> 
    </md-input-container> 
</md-card-content> 

请看看下面的图像上的问题更多的细节。正如你可以在图像中看到的那样,当我从后端加载数据时,占位符仍然保留在后台 enter image description here 但是,每当我从后端API加载表单元素的数据时,占位符不会移动。

+0

我找到了罪魁祸首它是被添加到该MD-输入,但从来没有得到删除MD-空类。 ““。我不知道为什么这不会从md-input中移除 –

回答