2017-11-28 32 views
0

だから、私は次の例を使用しようとしました。その下に、関連すると思われるすべての関連コードがあります。私はエラーを画面に表示させる方法を探しています。私はAngular 4をかなり新しくしているので、どんな助けもありがたいです。フォーム検証角度は4

pages.module.ts

import ... 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

import ... 

import { RegisterComponent } from './register/register.component'; 
import ... 
import { ErrorsComponent } from '../errors.component'; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     RouterModule.forChild(PagesRoutes), 
     FormsModule, 
     ReactiveFormsModule 
    ], 
    declarations: [ 
     LoginComponent, 
     RegisterComponent, 
     LockComponent, 
     ErrorsComponent 
    ] 
}) 

export class PagesModule {} 

register.component.ts

import ... 
import {FormGroup, FormBuilder, Validators, FormControl, NgForm} from '@angular/forms'; 
import ... 
import { CustomValidators } from "../../validators/custom-validator.directive"; 

declare var $:any; 

@Component({ 
    moduleId:module.id, 
    selector: 'register-cmp', 
    templateUrl: './register.component.html' 
}) 

export class RegisterComponent implements OnInit{ 
    registerForm: FormGroup; 
    test : Date = new Date(); 
    loading = false; 
    error = ''; 

    constructor(
     private form: FormBuilder, 
     private router: Router, 
     private authenticationService: AuthenticationService) 
    { 
     this.registerForm = new FormGroup ({ 
      'username':new FormControl('', Validators.required), 
      'email': new FormControl('', [Validators.required, CustomValidators.validEmail]), 
      'first_name': new FormControl('', Validators.required), 
      'last_name': new FormControl('', Validators.required), 
      'password': new FormControl('', Validators.required), 
      'confirmPassword': new FormControl('', Validators.required) 
     }); 
    } 


    checkFullPageBackgroundImage(){ 
     var $page = $('.full-page'); 
     var image_src = $page.data('image'); 

     if(image_src !== undefined){ 
      var image_container = '<div class="full-page-background" style="background-image: url(' + image_src + ') "/>' 
      $page.append(image_container); 
     } 
    }; 

    ngOnInit() { 


     this.checkFullPageBackgroundImage(); 

     setTimeout(function(){ 
      // after 1000 ms we add the class animated to the login/register card 
      $('.card').removeClass('card-hidden'); 
     }, 700) 
    } 

    register(registerForm: NgForm) { 
     console.log(this.registerForm.value); 
    } 


} 

register.component.html

<form [formGroup]="registerForm" (ngSubmit)="register(registerForm)"> 
     <div class="card card-plain"> 
     <div class="content"> 
     <div class="form-group"> 
       <input type="text" placeholder="Your First Name" class="form-control" formControlName="first_name"> 
       <errors [control]="registerForm.controls.first_name"></errors> 
     </div> 
     <div class="form-group"> 
       <input type="text" placeholder="Your Last Name" class="form-control" formControlName="last_name"> 
       <errors [control]="registerForm.controls.last_name"></errors> 
     </div> 
     <div class="form-group"> 
       <input type="text" placeholder="Username" class="form-control" formControlName="username"> 
       <errors [control]="registerForm.controls.username"></errors> 
     </div> 
     <div class="form-group"> 
       <input type="email" placeholder="Enter email" class="form-control" formControlName="email"> 
       <errors [control]="registerForm.controls.email"></errors> 
     </div> 

     <div class="form-group"> 
      <input type="password" placeholder="Password" class="form-control" formControlName="password"> 
      <errors [control]="registerForm.controls.password"></errors> 
     </div> 
     <div class="form-group"> 
      <input type="password" placeholder="Password Confirmation" class="form-control" formControlName="confirmPassword"> 
      <errors [control]="registerForm.controls.confirmPassword"></errors> 
     </div> 
      </div> 
      <div class="footer text-center"> 
       <button [disabled]="loading" type="submit" class="btn btn-fill btn-neutral btn-wd">Create Account</button> 
       <i *ngIf="loading" class="fa fa-spinner fa-spin fa-fw"></i> 
      </div> 
      <errors [control]="registerForm"></errors> 
     </div> 
    </form> 

errors.component.ts

import { Component, Input } from '@angular/core'; 
import { AbstractControlDirective, AbstractControl } from '@angular/forms'; 

@Component({ 
    selector: 'errors', 
    template: ` 
    <ul *ngIf="showErrors()"> 
     <li class="help-box text-warning" *ngFor="let error of errors()">{{error}}</li> 
    </ul> 
    `, 
}) 
export class ErrorsComponent { 

    private static readonly errorMessages = { 
    'required':() => 'This field is required', 
    'minlength': (params) => 'The min number of characters is ' + params.requiredLength, 
    'maxlength': (params) => 'The max allowed number of characters is ' + params.requiredLength, 
    'pattern': (params) => 'The required pattern is: ' + params.requiredPattern, 
    'age': (params) => params.message, 
    'validEmail': (params) => params.message 
    }; 

    @Input() 
    private control: AbstractControlDirective | AbstractControl; 

    showErrors(): boolean { 
    return this.control && 
     this.control.errors && 
     (this.control.dirty || this.control.touched); 
    } 

    errors(): string[] { 
    return Object.keys(this.control.errors) 
     .map(field => this.getMessage(field, this.control.errors[field])); 
    } 

    private getMessage(type: string, params: any) { 
    return ErrorsComponent.errorMessages[type](params); 
    } 

} 
+0

すべてのフィールドに入力して、一部を空欄にしておきますか? – haifzhan

答えて

1

あなたの例は、StackBlitzで作成した例に基づいて動作するようですが、errors.component.tsを見ると、this.control.dirty || this.control.touchedと表示されます。これは、フォーカスを合わせてからカーソルを使って入力をぼかす必要があることを意味します。値を入力してバックスペースを削除し、必要な検証表示を行います。

これは、docsFormControlプロパティのリストであり、クリックするとその意味を読み取ることができます。ですから、例えばdirtyのために:

に触れ

は触れます:ブール

を制御がマークされているユーザーがその上にblurイベントをトリガした、一度触れました。

ダーティ

が汚れる:ユーザーがUIで値を変更した場合はブール

制御が汚れています。

コントロールの値をプログラムで変更しても、 が汚れていないことに注意してください。

また、あなたのコードを見てから、私は​​を読んだだけでなく、FormBuilder上に読んでお勧めしたいです。 StackBlitzの例では、FormGroupの例をFormBuilderに変更しました。これはより簡潔です。最後に、クラスを追加/削除するためにjQueryを使用しているようですが、代わりにngClassを見てください。あなたはAngularでjQueryを使う必要はありません。

+0

はい、私はあなたのために働くことがわかります。何らかの理由で、私のために私の仕事はまだできません。電子メールに記入していないときにタイプエラーが発生し、フォーカスとボケが発生します。私は、アプリを公開し、レビューのためにアップロードするつもりです。 http://member.newworldfantasysportsにあります。com、それは明らかに「登録」リンクです。ご協力いただきありがとうございます。 – webdevsoup

+0

FormBuilderの変更を使って試しましたか?私の例をあなたのものと比較して、そうでなければ何が違うかを調べるかもしれません。あなたがちょうど私がそれで遊ぶことができるように私が作ったstackblitzに違いをドロップする場合は、より簡単かもしれません。 – mtpultz

+0

あなたが求めていることをどうやって行うのか分かりません。これは現在FormBuilderを使用しています... – webdevsoup

関連する問題