Angular 5 可选字段的表单验证

Question

好的，所以我是 Angular 的新手（我正在使用 Angular 5）。我正在尝试实施表单验证这样我就有两个输入字段，其中： - 用户必须在提交表单之前使用一个或两个字段。 - 两个字段都必须遵循模式 \w{10} - 在满足验证标准之前，提交按钮必须保持禁用状态 - 每个字段下方都需要有一条消息，将格式错误的输入描述为发生了。

我已经设法在模式匹配和禁用提交按钮方面取得了一些进展....但我很难弄清楚提供这样的功能一个用户选择只填写一个字段并启用提交按钮......我似乎只能在两个字段都被使用时让它工作。

<!--my view code/mark up.... -->


<div>
  <h3>Angular  Template Form validation </h3>
  <form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" novalidate >
    <p>Is "userlogin" valid? {{userlogin.valid}}</p>
    <input type = "text" name = "emailId" placeholder = "emailId" ngModel required   pattern = "\w+\@\w+\.\w+" />
    <br/>
    <input type = "password" name = "passwd" placeholder = "passwd" ngModel   pattern ="\w{10}"/>
    <br/>
    <input type = "submit"  [disabled] = "!userlogin.valid"  value = "submit">
 </form>
</div>


import { Component, OnInit ,ANALYZE_FOR_ENTRY_COMPONENTS } from '@angular/core';
import { FormGroup, FormControl,FormArray,NgForm, Validators} from '@angular/forms';
import {Report} from './report.model';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

      constructor() {}

      ngOnInit() {
        this.report = new Report() ;
        this.isDisabled = false ;
      }


     onClickSubmit(data) {
        let email = data.emailId ;
        let passwd = data.passwd ;
        email = email.trim() ;
        passwd = passwd.trim() ;
        console.log(email);
        this.emailFlag = this.regexpEmail.test(email);
        // alert('Entered Email id : ' + this.emailFlag);
        alert('Email -> ' + email + ': ' + 'passwd :' + passwd );

      }

}

任何帮助将不胜感激！！！谢谢！！！

Answer 1

尝试下面给出的代码：

模板：

<div>
  <h3>Angular  Template Form validation </h3>
  <form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" novalidate >
    <p>Is "userlogin" valid? {{userlogin.valid}}</p>
    <input type = "text" name = "emailId" placeholder = "emailId" [(ngModel)]="emailid"  pattern = "\w+\@\w+\.\w+" />
    <br/>
    <input type = "password" name = "passwd" placeholder = "passwd" [(ngModel)]="pwd"  pattern ="\w{10}"/>
    <br/>
    <input type = "submit"  [disabled] = "(!emailid && !pwd) || !userlogin.valid"  value = "submit">
 </form>
</div>

组件-

import { Component, OnInit ,ANALYZE_FOR_ENTRY_COMPONENTS } from '@angular/core';
import { FormGroup, FormControl,FormArray,NgForm, Validators} from '@angular/forms';
import {Report} from './report.model';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  emailid;
  pwd;
      constructor() {}

      ngOnInit() {
        this.report = new Report() ;
        this.isDisabled = false ;
      }

     onClickSubmit(data) {
        let email = data.emailId ;
        let passwd = data.passwd ;
        email = email.trim() ;
        passwd = passwd.trim() ;
        console.log(email);
        this.emailFlag = this.regexpEmail.test(email);
        // alert('Entered Email id : ' + this.emailFlag);
        alert('Email -> ' + email + ': ' + 'passwd :' + passwd );

      }

}

Angular 5 可选字段的表单验证

Angular 5 Form validation for optional fields

validation

textfield

angular