我尝试使用服务进行验证，收到错误，如下所示 1：错误错误：formGroup需要一个FormGroup实例。请通过一个。
示例：
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
在你班上：
this.myGroup = new FormGroup({
firstName: new FormControl()
});
2
ng:///AppModule/HeroFormReactiveComponent.ngfactory.js:95 ERROR TypeError: Cannot read property 'get' of undefined
at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addControl (vendor.bundle.js:64292)
at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._setUpControl (vendor.bundle.js:64881)
at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges (vendor.bundle.js:64799)
at checkAndUpdateDirectiveInline (vendor.bundle.js:55512)
at checkAndUpdateNodeInline (vendor.bundle.js:57011)
at checkAndUpdateNode (vendor.bundle.js:56950)
at debugCheckAndUpdateNode (vendor.bundle.js:57811)
at debugCheckDirectivesFn (vendor.bundle.js:57752)
at Object.View_HeroFormReactiveComponent_0._co [as updateDirectives] (ng:///AppModule/HeroFormReactiveComponent.ngfactory.js:218)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:57737)
我认为我应该使用observable / call back函数，以便我们可以在从服务获取数据后调用functions（）。但我不知道怎么做...提前谢谢
TS：
export class HeroFormReactiveComponent implements OnInit {
loginDetailsArray: any;
detailsArray: any[];
minLength: any;
maxLength: any;
pattern: any;
// customerDetail: any[];
hero = {
username: '',
password: '',
email: ''
};
constructor(private customerService: CustomerService, private http: Http) {}
heroForm: FormGroup;
ngOnInit(): void {
this.loginDetailsArray = new Object();
this.detailsArray = new Array();
this.loadLoginDetails();
}
functions() {
console.log("print");
console.log(this.loginDetailsArray);
var minLength = this.loginDetailsArray.rules.username.minlength;
var maxLength = this.loginDetailsArray.rules.username.maxlength;
var pattern = this.loginDetailsArray.rules.username.pattern;
this.heroForm = new FormGroup({
'username': new FormControl(this.hero.username, [
Validators.minLength(this.minLength),
Validators.maxLength(this.maxLength),
// Validators.pattern(pattern),
]),
'password': new FormControl(this.hero.password, [
Validators.minLength(2),
Validators.maxLength(30),
]),
});
}
loadLoginDetails() {
this.customerService.getLoginDetails().subscribe(res => {
this.loginDetailsArray = res.json();
this.functions();
});
}
get username() {
return this.heroForm.get('username');
}
get password() {
return this.heroForm.get('password');
}
save() {
console.log('Saved: ' + JSON.stringify(this.heroForm.value));
this.detailsArray.push(this.heroForm.value);
}
}
SERVICE：
@Injectable()
export class CustomerService{
constructor(private http:Http){}
getLoginDetails(){
console.log("getLoginDetails")
//return this.http.get(assets/login.json).map((response: Response) => response.json());
return this.http.get('assets/login.json').map((response: Response) => response);
}
}
HTML：
<div class="container">
<h1>Login</h1>
<form (ngSubmit)="save()" [formGroup]="heroForm" #formDir="ngForm">
<div [hidden]="formDir.submitted">
<div class="form-group">
<label for="username">username</label>
<input id="username" class="form-control" formControlName="username">
<div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
<div *ngIf="username.errors.required">
required
</div>
<div *ngIf="username.errors.minlength">
Please enter a valid email that does not exceed the character limit
</div>
<div *ngIf="username.errors.maxlength">
Please enter a valid email that does not exceed the character limit
</div>
<div *ngIf="username.errors.pattern">
Please enter a valid email address
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" class="form-control" formControlName="password" required>
<div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
<div *ngIf="password.errors.required">
required
</div>
<div *ngIf="password.errors.minlength">
Please enter a password with minimum characters
</div>
<div *ngIf="password.errors.maxlength">
Please enter a password that does not exceed 30 characters
</div>
</div>
</div>
<button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button>
<!--<td colspan="2">
<div class="alert alert-danger col-md-12" role="alert" *ngIf="!flag">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {{errormsg}}
</div>
</td>-->
</div>
</form>
答案 0 :(得分：2)
请查看您的要求的工作版本。
<h1>Login</h1>
<form (ngSubmit)="save()" [formGroup]="heroForm" >
<div >
<div class="form-group">
<label for="username">username</label>
<input #username id="username" class="form-control" formControlName="username">
<div *ngIf="heroForm.get('username').invalid && (heroForm.get('username').dirty || heroForm.get('username').touched)" class="alert alert-danger">
<div *ngIf="heroForm.get('username').hasError('minlength')">
Please enter a valid email that does not exceed the character limit
</div>
<div *ngIf="heroForm.get('username').hasError('maxlength')">
Please enter a valid email that does not exceed the character limit
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input #password id="password" class="form-control" formControlName="password" required>
<div *ngIf="heroForm.get('password').invalid && (heroForm.get('password').dirty || heroForm.get('password').touched)" class="alert alert-danger">
<div *ngIf="heroForm.get('password').hasError('required') && heroForm.get('password').touched"
class="alert alert-danger"> Password is required.</div>
<div *ngIf="heroForm.get('password').hasError('minlength')">
Please enter a password with minimum characters
</div>
<div *ngIf="heroForm.get('password').hasError('maxlength')">
Please enter a password that does not exceed 30 characters
</div>
</div>
</div>
<button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button>
<!--<td colspan="2">
<div class="alert alert-danger col-md-12" role="alert" *ngIf="!flag">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {{errormsg}}
</div>
</td>-->
</div>
</form>
Component.ts
export class SampleComponent OnInit {
public loginDetailsArray: any= [];
public detailsArray: any= [];
public minLength: any;
public maxLength: any;
hero = {
username: '',
password: '',
email: ''
};
constructor( private dataTableService: DataTableService,private fb:
FormBuilder ) {
this.dataTableService = dataTableService;
this.heroForm = new FormGroup({
'username': new FormControl(this.hero.username),
'password': new FormControl(this.hero.password, [
Validators.minLength(2),
Validators.maxLength(30),
]),
});
}
heroForm: FormGroup;
public ngOnInit(): void {
this. loadLoginDetails();
}
loadLoginDetails() {
this.dataTableService.getLoginDetails().subscribe(
res => {
this.loginDetailsArray = res;
this. minLength=this.loginDetailsArray.minlength;
this.maxLength=this.loginDetailsArray.maxLength;
console.log("minLength",this.minLength);
this.heroForm.controls["username"].setValidators([
Validators.minLength(this.minLength),
Validators.maxLength(this.maxLength)
// Validators.pattern(pattern),
]);
console.log(this.heroForm);
});
}
get username() {
return this.heroForm.get('username');
}
get password() {
return this.heroForm.get('password');
}
save() {
console.log('Saved: ' + JSON.stringify(this.heroForm.value));
this.detailsArray.push(this.heroForm.value);
}
}
service.ts
@Injectable()
export class DataTableService {
constructor(private http: Http) {
this.http = http;
}
getLoginDetails(): Observable<any> {
return this.http.get('./datatable/data/sample.json').map((response: Response) => response.json());
}
}