角度2的材料设计复选框中缺少什么

时间:2016-06-29 13:43:22

标签: angular angular-material

我在html中设置了以下内容......

 <div>
   <input type="checkbox" 
         [(ngModel)]="userSettings.profileMetric" 
         [ngFormControl]="settingsForm.controls['emailAddress']" 
         ng-true-value="'YES'" 
         ng-false-value="'NO'">
   <label>Use metric for profile settings (Weight in kilos, height in meters, etc.)</label>
</div>

这种方法很好,但看起来不像材料设计复选框那么好。如果我这样做:

<div>
  <md-checkbox 
        [(ngModel)]="userSettings.profileMetric"                
        [ngFormControl]="settingsForm.controls['profileMetric']" 
        ng-true-value="'Yes'" 
        ng-false-value="'No'">Use metric </md-checkbox>
</div>

,这在组件中:

userSettings: User;
    errorMessage: string; 
    token = '';
    settingsForm: ControlGroup;
    userName: Control;
    firstName: Control;
    lastName: Control;
    dob: Control;
    sex: Control;
    emailAddress: Control;
    profileMetric: Control; 
    recipeMetric: Control;
    nutrientMetric: Control;
 
    //, private tokenService: TokenService
    constructor(private settingsService: SettingsService, private route: ActivatedRoute, private builder: FormBuilder) {
           this.settingsService.getSettingsData(1)
            .subscribe(
            user => this.userSettings = user,
            error => this.errorMessage = <any>error,
            () => console.log(this.userSettings));
        
        this.userName = new Control("", Validators.required);
        this.firstName = new Control("", Validators.required);
        this.lastName = new Control("", Validators.required);
        this.dob = new Control("", Validators.required);
        this.sex = new Control("", Validators.required);
        this.emailAddress = new Control("", Validators.required);
        this.profileMetric = new Control("", Validators.required); 
        this.recipeMetric = new Control("", Validators.required);
        this.nutrientMetric = new Control("", Validators.required);

        this.settingsForm = builder.group({
            userName: this.userName,
            firstName: this.firstName,
            lastName: this.lastName,
            dob: this.dob,
            sex: this.sex,
            emailAddress: this.emailAddress,
            profileMetric: this.profileMetric,
            recipeMetric: this.recipeMetric,
            nutrientMetric: this.nutrientMetric
        });

我得到了这个(没有复选框,没有错误):

enter image description here

谁能看到我做错了什么?

0 个答案:

没有答案