Angular 6输入表单验证

Question

我有3个主要需要输入的字段，但是现在我想提出一个逻辑，即如果其中一个已填写，则不再需要其余两个。 无论如何，它可以正常工作，但是问题是，如果我填写表单然后删除值（因此现在表单基本上为空），它将保持表单有效。

所以我输入Uname： abc形式有效，但是如果我删除Uname->形式无效

现在，如果我填写用户名，则在第二个输入上： abcdef表格有效

现在，如果我删除用户名

表格仍然有效

这是我的闪电战：

https://stackblitz.com/edit/angular-5l9kb4

Answer 1

使用下面的代码

checkValue() {
this.myForm.get("Uname").valueChanges.subscribe(value => {
  if (value  && value.length > 0) {
    this.myForm.controls["username"].clearValidators();
    this.myForm.controls["username"].updateValueAndValidity();
    this.myForm.controls["description"].clearValidators();
    this.myForm.controls["description"].updateValueAndValidity();
  }
});
this.myForm.get("username").valueChanges.subscribe(value => {
  if (value  && value.length > 0) {
    this.myForm.controls["description"].clearValidators();
    this.myForm.controls["description"].updateValueAndValidity();
    this.myForm.controls["Uname"].clearValidators();
    this.myForm.controls["Uname"].updateValueAndValidity();
  }
});
this.myForm.get("description").valueChanges.subscribe(value => {
  if (value && value.length > 0) {
    this.myForm.controls["username"].clearValidators();
    this.myForm.controls["username"].updateValueAndValidity();
    this.myForm.controls["Uname"].clearValidators();
    this.myForm.controls["Uname"].updateValueAndValidity();
  }
});

工作Stackblitz示例。

我添加了一个简单的条件value.length > 0以检查最小长度。 如果需要，可以添加更多验证。 我希望它能解决您的问题。

Answer 2

当值存在时，您的代码将清除验证程序。 现在，当您删除附加值时，您的代码将不执行任何操作。 您必须重新添加验证器。

最好的方法是将自定义验证器添加到整个表单组。 该验证者将有权访问组中的所有控件。 请删除每个formControl上的订阅。

this.myForm = fb.group({
  Uname : [''],
  username : [''],
  description : ['']

},{ validator: formValidator });

function formValidator(formGroup: FormGroup) {
  const uName = formGroup.controls['Uname'].value;
  const username = formGroup.controls['username'].value;
  const description = formGroup.controls['description'].value;
  return uName === '' && username === '' && description === '' ? { 
  oneFieldRequired: {valid: false} } : null;
} 

Answer 3

理想情况下，这应该是FormGroup Validator的职责。 我建议您创建一个自定义验证器，以验证整个FormGroup ，因为无论如何这就是您要执行的操作：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from "@angular/forms";
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private readonly fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      uName: [''],
      username: [''],
      description: ['']
    }, { validators: anyOneFieldRequired });
  }

  submit(value) {
    console.log('Form Value: ', value);
  }
}

function anyOneFieldRequired(formGroup: FormGroup) {
  const uName = formGroup.controls['uName'].value;
  const username = formGroup.controls['username'].value;
  const description = formGroup.controls['description'].value;
  return uName === '' && username === '' && description === '' ? { oneFieldRequired: true } : null;
}

在您的模板中：

<form [formGroup]="myForm" (ngSubmit)="submit(myForm.value)">
    <mat-form-field class="full-width">
        <input matInput type="text" formControlName="uName">
  </mat-form-field>

  <mat-form-field class="full-width">
    <input matInput type="text" formControlName="username" >
  </mat-form-field>

  <mat-form-field class="full-width">
    <input matInput type="text" formControlName="description">
  </mat-form-field>

  <button mat-raised-button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

---

这是供您参考的工作样本StackBlitz 。

Answer 4

首先检查onTypeChange($event.target.value)函数

<form [formGroup]="myForm" (ngSubmit)="submit(myForm.value)">

 <mat-form-field class="full-width">
   value 1
      <input matInput type="text" formControlName="Uname" (input)="onTypeChange($event.target.value)">
    </mat-form-field>

    <mat-form-field class="full-width">vlaue 2
      <input matInput type="text" formControlName="username" (input)="onTypeChange($event.target.value)">
    </mat-form-field>

    <mat-form-field class="full-width" >
      value 3
      <input matInput type="text" formControlName="description"  (input)="onTypeChange($event.target.value)">
    </mat-form-field>
  <button mat-raised-button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

.ts文件

 onTypeChange(searchValue : string ) 
     {     
      console.log("typed value"+searchValue);}
      }

 submit(myForm)
  {
        console.log(myForm);
  }

Answer 5

我尚未使用反应式表单验证，但已完全满足您的要求。请检查以下代码：Fiddle链接： 根据情况禁用表单按钮

 import { Component,OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormArray, } from "@angular/forms"; import { FormControl } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { name = 'Angular'; myForm:FormGroup; Uname:any; username:any; description:string; constructor(private fb:FormBuilder) { } ngOnInit() { } checkForm() { console.log(typeof this.Uname,this.username,this.description) if((typeof this.Uname !== 'undefined' && this.Uname != '') || (typeof this.username !== 'undefined' && this.username != '') || (typeof this.description !== 'undefined' && this.description != '')) return false; else return true; } } 

 <form name="Mainform" id="Mainform" (ngSubmit)="submit(myForm.value)"> <mat-form-field class="full-width"> <input matInput type="text" name="Uname" [(ngModel)]="Uname"> </mat-form-field> <mat-form-field class="full-width"> <input matInput type="text" [(ngModel)]="username" name="username" > </mat-form-field> <mat-form-field class="full-width"> <input matInput type="text" [(ngModel)]="description" name="description"> </mat-form-field> <button mat-raised-button type="submit" [disabled]="checkForm()">Submit</button> </form>