英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论