我在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
});
我得到了这个(没有复选框,没有错误):
谁能看到我做错了什么?