今回は angular4 でのフォーム検証の手順について詳しく説明します。 angular4 のフォーム検証に関する 注意事項 とは何ですか? 実際のケースを見てみましょう。
この章では、レスポンシブフォームの作成とフォーム入力値の検証について紹介します。テンプレートフォームは省略します。1. レスポンシブフォームを使用する手順
1. ReactiveFormsModule をモジュール (通常は app.module.ts) に導入します 2. コンポーネントの ts ファイルでレスポンシブフォームを使用します
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; export class ReactiveFormComponent implements OnInit { private myForm: FormGroup; constructor(private fb: FormBuilder) { this.createForm(); } ngOnInit() { } // 创建表单元素 createForm() { this.myForm = this.fb.group({ username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]], mobile: ['', [Validators.required]], password: this.fb.group({ pass1: [''], pass2: [''] }) }); } // 提交表单函数 postDate() { /** * valid:是否有效 * invalid:无效 * dirty:脏 * status:状态 * errors:显示错误 */ if(this.myForm.valid){ console.log(this.myForm.value); } } }
<form [formGroup]="myForm" (ngSubmit)="postDate()"> <p class="form-group"> <label for="username">用户名:</label> <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" /> </p> <p class="form-group"> <label for="mobile">手机号码:</label> <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/> </p> <p formGroupName="password" style="border:none;"> <p class="form-group"> <label>密码:</label> <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" /> </p> <p class="form-group"> <label>确认密码:</label> <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" /> </p> </p> <p class="form-group"> <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" /> </p> </form>
2. フォームを使用してデータを検証します
1. Angular には 3 つの一般的なフォーム検証が付属しています: Validators の required、minLength、maxLength です 2. カスタム フォーム バリデータ (実際には単なる関数、
function のパラメーターは現在検証する必要がある行であり、任意のオブジェクトを返します) りー
3. 認証方法をカスタマイズする手順
1. プロジェクトに必要なバリデーター用に別のファイルを作成します**格式** export function fnName(control:FormControl|FormGroup):any{ }
import { FormControl, FormGroup } from '@angular/forms'; /** * 自定义验证器(其实就是一个函数,一个返回任意对象的函数) * 传递的参数是当前需要验证的表单的FormControl * 通过传递的参数获取当前表单输入的值 */ export function mobileValidator(control: FormControl): any { console.dir(control); // 获取到输入框的值 const val = control.value; // 手机号码正则 const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; const result = mobieReg.test(val); return result ? null : { mobile: { info: '手机号码格式不正确' } }; }
createForm() { this.myForm = this.fb.group({ username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]], mobile: ['', [Validators.required, mobileValidator]], password: this.fb.group({ pass1: [''], pass2: [''] }) }); }
// 定义一个密码组的验证方法 export function passValidator(controlGroup: FormGroup): any { // 获取密码输入框的值 const pass1 = controlGroup.get('pass1').value as FormControl; const pass2 = controlGroup.get('pass2').value as FormControl; console.log('你输入的值:', pass1, pass2); const isEqule: boolean = (pass1 === pass2); return isEqule ? null : { passValidator: { info: '两次密码不一致' } }; }
4. フロントエンドページのエラー表示について
1. ページ表示エラーcreateForm() { this.myForm = this.fb.group({ username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]], mobile: ['', [Validators.required, mobileValidator]], password: this.fb.group({ pass1: [''], pass2: [''] }, {validator: passValidator}) }); }
<p class="form-group"> <label for="username">用户名:</label> <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" /> <!-- 当输入框没有访问的时候或者合法的时候不显示 --> <p [hidden]="myForm.get('username').valid || myForm.get('username').untouched"> <p [hidden]="!myForm.hasError('required','username')">用户名必填的</p> <p [hidden]="!myForm.hasError('minlength','username')">用户名长度过短</p> <p [hidden]="!myForm.hasError('maxlength','username')">用户名长度太长</p> </p> </p> <p class="form-group"> <label for="mobile">手机号码:</label> <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/> <p [hidden]="myForm.get('mobile').valid || myForm.get('mobile').untouched"> <p [hidden]="!myForm.hasError('mobile', 'mobile')">{{myForm.getError('mobile', 'mobile')?.info}}</p> </p> </p> <p formGroupName="password" style="border:none;"> <p class="form-group"> <label>密码:</label> <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" /> </p> <p class="form-group"> <label>确认密码:</label> <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" /> </p> <!-- 对于group可以不在外面加一层判断 --> <p> <p [hidden]="!myForm.hasError('passValidator','password')"> {{myForm.getError('passValidator','password')?.info}} </p> </p> </p>
5. カスタムクラス表示エラー
1. 入力ボックスに と入力します これは、フィールドが無効であり、タッチされていることを意味します。この class="error" を追加します.ng-touched:not(form),.ng-invalid:not(form) { border: 1px solid #f00; } .ng-valid:not(form),.ng-untouched:not(form) { border: 1px solid #ddd; } p{ color:#f00; }
ネイティブ Ajax の get メソッドと post メソッドの使用方法の詳細な説明
以上がangular4 のフォーム検証手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。