3

请我是 Angular 的新手，我正在学习 Felipe Coury 的教程。在本书的一章（编写您的第一个 Angular 2 Web 应用程序）中，他使用“.value”来显示标题和我们要输入的链接。对他来说效果很好，但在我的系统上它一直显示“错误类型错误：无法读取未定义的属性'值'”。

这是我的代码，

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>
4

0 回答 0