请我是Angular的新手，我正在接受Felipe Coury的教程。在本书的一章（编写你的第一个有角度的2 web应用程序）中，他使用＆＃34; .value＆＃34;显示我们要输入的标题和链接。对他而言，它运作良好，但在我的系统上，它一直显示＆＃34; ERROR TypeError：无法读取属性＆＃39;值＆＃39;未定义＆＃34;。
这是我的代码，
enter code here
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient} from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { Http } from '@angular/http/src/http';
import { NgModule } from '@angular/core';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
rForm: FormGroup;
post:any; // A property for our submitted form
password:string = '';
dob:string='';
address:string='';
city:string='';
name:string = '';
email:string='';
titleAlert:string = 'This field is required';
constructor(private fb: FormBuilder,private router: Router,private http:HttpClient) {
this.rForm = fb.group({
'name': [null, Validators.required],
'dob': [null, Validators.required],
'address': [null, Validators.required],
'city': [null, Validators.required],
'email': [null,Validators.email],
'password': [null, Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(12)])],
'validate' : ''
});
}
submit(rForm){
if(this.rForm.valid){
console.log("hiii");
console.log(rForm.value.name);
console.log(rForm.value.dob);
console.log(rForm.value.address);
console.log(rForm.value.city);
console.log(rForm.value.email);
console.log(rForm.value.password);
const body = JSON.stringify({
'name':rForm.value.name,
'dob':rForm.value.dob,
'address':rForm.value.address,
'city':rForm.value.city,
'email':rForm.value.email,
'password': rForm.value.password,
'status': 'A'
});
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Accept': 'application/json',
'Access-Control-Allow-Origin':'*'
}
)
};
this.http.post('http://192.168.134.108:8080/registration/',body,httpOptions)
.subscribe
(data =>
{
alert('Succesfully Added User');
console.log(data);
}
,
(err)=> console.log('error occurred')
);
rForm.reset();
console.log("hii");
this.router.navigate(['/login']);
}
else{
this.rForm.controls['name'].markAsTouched(),
this.rForm.controls['password'].markAsTouched(),
this.rForm.controls['dob'].markAsTouched(),
this.rForm.controls['address'].markAsTouched(),
this.rForm.controls['city'].markAsTouched(),
this.rForm.controls['email'].markAsTouched()
}
}
reset(){
console.log("hlo");
this.rForm.reset();
}
ngOnInit() {
}
}
<body>
<div *ngIf="!name; else forminfo">
<form [formGroup]="rForm" >
<div class="form-container">
<div class="first">
<div class="form">
<h4>Full Name:</h4>
<input type="text" formControlName="name" class="text-control" id="name" placeholder="Full Name"><br>
<small class="alert" *ngIf="!rForm.controls['name'].valid && rForm.controls['name'].touched">{{ titleAlert }}</small>
<br>
<h4>Date of Birth:</h4>
<input type="date" formControlName="dob" class="text-control" id="dob" placeholder="dd/mm/yy"><br>
<small class="alert" *ngIf="!rForm.controls['dob'].valid && rForm.controls['dob'].touched">{{ titleAlert }}</small>
<br>
<h4>Address:</h4>
<input type="text" formControlName="address" class="text-control" id="address" placeholder="address"><br>
<small class="alert" *ngIf="!rForm.controls['address'].valid && rForm.controls['address'].touched">{{ titleAlert }}</small>
<br>
<h4>city:</h4>
<input type="text" formControlName="city" class="text-control" id="city" placeholder="city"><br>
<small class="alert" *ngIf="!rForm.controls['city'].valid && rForm.controls['city'].touched">{{ titleAlert }}</small>
<br>
<h4>Email:</h4>
<input type="text" formControlName="email" class="text-control" id="email" placeholder="example@gmail.com"><br>
<small class="alert" *ngIf="!rForm.controls['email'].valid && rForm.controls['email'].touched">{{ titleAlert }}</small>
<br>
<h4>Password:</h4>
<input type="password" formControlName="password" class="text-control" id="password" placeholder="password"><br>
<small class="alert" *ngIf="!rForm.controls['password'].valid && rForm.controls['password'].touched">Password must be 6 to 12 charecters</small>
<br>
</div>
<div class="button-control">
<button class="button" (click)="submit()">
submit
</button>
<button class="button" (click)="reset()" >
reset
</button>
</div>
</div>
</div>
</form>
</div>
</body>