角度材料 md 错误 ng 如果不起作用



我正在尝试使用角度材料验证密码,但是当标签<md-error>包含在<md-form-field>中时它不起作用。您可以看到它在哪里有效,在哪里无效。我做错了什么?

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/map';
import {
AbstractControl,
FormControl,
Validators,
FormGroup,
FormBuilder,
FormsModule,
FormGroupDirective,
NgForm
} from '@angular/forms';
function passwordMatcher(c: AbstractControl) {
if (!c.get('password') || !c.get('confirm')) return null;
return c.get('password').value === c.get('confirm').value ? null 
: {'nomatch': true};
}
@Component({
selector: 'app-testing',
template: `
<form [formGroup]="form">
<div formGroupName="account">
<md-form-field>
<input mdInput
formControlName="password">
</md-form-field>
<md-form-field>
<input mdInput
formControlName="confirm">
<md-error 
*ngIf="form.hasError('nomatch','account')">
THIS DOESN'T WORK
</md-error>
</md-form-field>
</div>
</form>
<md-error *ngIf="form.hasError('nomatch','account')">
THIS WORK
</md-error>
<p>{{form.value | json}}</p>
<p>{{form.status}}</p>
<p>{{form.get('account.confirm').status}}</p>
{{form.hasError('nomatch', 'account')}}
`,
styleUrls: ['./testing.component.css']
})
export class TestingComponent implements OnInit {
form: FormGroup;
constructor(public fb: FormBuilder) {
this.form = this.fb.group({
account: this.fb.group({
password: '',
confirm: ''
}, {validator: passwordMatcher})
});
}
ngOnInit() {
}
}
try to add the following code 
<md-form-field>
<input mdInput
formControlName="confirm" [errorStateMatcher]="myErrorStateMatcher.bind(this)">
<md-error 
*ngIf="form.hasError('nomatch','account')">
THIS DOESN'T WORK
</md-error>
</md-form-field>

在组件添加函数中

myErrorStateMatcher(){
return  this.form.controls["account"].getError("nomatch");
}

最新更新