如何使用Angular验证器来使表单控件中的给定值无效?

huangapple go评论62阅读模式
英文:

How to use Angular validators to invalidate a given value in form control?

问题

I would like to the form to not be valid while "Please Select" option is still selected.

我希望在“请选择”选项仍然被选择时表单无效。

英文:

I have an angular reactive form in which one of the select fields is pre selected.
The pre selected value is not null, and it can't be null because the way this value is used in other components. In some instances I would like the form to be invalid in case the default value is stil selected.
I imagine there must be a way to achieve this with validators in a similar way as the nonNullable validator, except that in this case is a given value ("not-allowed") and not null.

Here my form.ts:

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

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

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      username: this.formBuilder.control('', [Validators.required]),
      favouriteFood: this.formBuilder.control('not-allowed', [
        Validators.required,
      ]),
      password: this.formBuilder.control('', [Validators.required]),
    });
  }

  public save(): void {
    if (this.myForm.valid) {
      console.log('submited');
    } else {
      console.error('invalid');
    }
  }
}

And html:

<form [formGroup]="myForm" (ngSubmit)="save()">
  <label>Username:</label>
  <input type="text" formControlName="username" />

  <div>
    <label>Favorite food</label>
    <select name="cars" id="cars" formControlName="favouriteFood">
      <option value="not-allowed">Please Select</option>
      <option value="steak-0">Steak</option>
      <option value="pizza-1">Pizza</option>
      <option value="tacos-2">Tacos</option>
    </select>
  </div>
  <label>Password:</label>
  <input type="password" formControlName="password" />

  <button type="submit">Submit</button>
</form>

And the link to a fiddle:
https://stackblitz.com/edit/angular-elements-fiddle-dwhmc8?file=src%2Fapp%2Fapp.component.ts

I would like to the form to not be valid while "Please Select" option is still selected.

答案1

得分: 1

你可以创建一个自定义的 ValidatorFn 来检查你的控件的值:

favouriteFood: this.formBuilder.control('not-allowed', [
  Validators.required,
  (control: AbstractControl) => {
    return control.value === 'not-allowed'
      ? { favoriteFood: true }
      : null;
    },
]),

这个函数的形状是 (AbstractControl): ValidationErrors | null,因此,如果你发现错误,你需要返回一个带有你想要标记为无效的字段键的 ValidationErrors 对象。

英文:

You can create a custom ValidatorFn that checks the value of your control:

favouriteFood: this.formBuilder.control('not-allowed', [
  Validators.required,
  (control: AbstractControl) => {
    return control.value === 'not-allowed'
      ? { favoriteFood: true }
      : null;
    },
]),

The shape is (AbstractControl): ValidationErrors | null so, if you find an error, you have to return a ValidationErrors object with the key of the field you want to mark as invalid.

huangapple
  • 本文由 发表于 2023年3月31日 21:16:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75898990.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定