0
私はこのanglejs2を初めて使っています。 ページを使用して、formGroup formControlName
ページを使用してnull値をオブジェクトに渡すというエラーが発生しました。angularjs2 formGroup and formControlName
HTMLコード:あなたが渡しているよう
<div class="col-md-8 col-md-offset-2">
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="firstName">firstname</label>
<input
type="text"
id="firstName"
class="form-control"
formControlName="firstName">
</div>
<div class="form-group">
<label for="lastName">lastName</label>
<input
type="text"
id="lastName"
class="form-control"
formControlName="lastName">
</div>
<div class="form-group">
<label for="email">Mail</label>
<input
type="email"
id="email"
class="form-control"
formControlName="email">
</div>
<div class="form-group">
<label for="password">password</label>
<input
type="password"
id="password"
class="form-control"
formControlName="password">
</div>
<button
class="btn btn-primary"
type="submit"
[disabled]="!myForm.valid">Submit</button>
</form>
</div>
<!--
[formGroup]="myForm" is used to instruct the angular2 to don't use ur own form use mine.'
formControlName is used to identify which attribute to match in SignupComponent class
-->
signup.component.tsはそれをオブジェクトに値を渡すときに、私はこのエラーを取得しています
import { Component, OnInit} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { AuthService} from './auth.service';
import { User} from './user.model';
@Component({
selector:'app-signup',
templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit{
myForm: FormGroup;
constructor(private authService : AuthService) {}
onSubmit(){
console.log(this.myForm);
this.myForm.reset();
}
ngOnInit(){
this.myForm = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
email: new FormControl(null, [
Validators.required,
Validators.pattern("[A-Z0-9a-z._%+-][email protected][A-Za-z0-9.-]+\\.[A-Za-z]{2,64}")
]),
password: new FormControl(null, Validators.required),
});
}
}
ファイルは エラーを与えますオブジェクトへのnull値