Angular 从表单控件验证中删除 Validators.min
Angular removing Validators.min from form control validation
我有一个包含 2 个字段的表单:
- includeValidation,一个 select 下拉列表(2 个选项):带验证,不带验证
- 金额,输入数字字段
根据第一个下拉列表,我在第二个字段上有验证器:Validators.required、Validators.min(0.1).
我正在尝试使用 clearValidators() 来删除验证,但它只删除了必需的,但没有删除 min(0.1)
当 includeValidation == "without validation" 时如何删除 min(0.1)
formtest.ts
ngOnInit(): void {
this.initForm();
this.initValueChanges();
}
initForm(): void {
this.addForm = this.formBuilder.group({
includeValidation: [''],
amount: [0, [Validators.required, Validators.min(0.1)]]
});
}
initValueChanges() {
this.addForm.get('includeValidation').valueChanges.subscribe((value) => {
if(value === 'with validation') {
this.addForm.get('amount').setValidators([Validators.required, Validators.min(0.1)]);
} else if(value === 'without validation') {
this.addForm.get('amount').setValue(0);
this.addForm.get('amount').clearValidators();
}
});
}
previewSaveButton() {
this.addForm.get('amount').updateValueAndValidity();
if(this.addForm.valid) {
}
}
formtest.html
<form novalidate role="form" name="addForm" [formGroup]="addForm">
<div class="row">
<div class="col-md-12">
<h5>General</h5>
<div class="form-group"><label>include Validation</label>
<select name="includeValidation" class="form-control" formControlName="includeValidation">
<option></option>
<option value="with validation">with validation</option>
<option value="without validation">without validation</option>
</select>
</div>
<div class="form-group"><label>amount</label>
<input name="amount" type="text" class="form-control" formControlName="amount">
</div>
</div>
</div>
<hr />
<div>
<div class="d-flex justify-content-end">
<button type="submit" (click)="previewSaveButton()">Next</button>
</div>
</div>
</form>
无论何时在运行时添加或删除验证器,都必须显式调用 updateValueAndValidity()
。
来自docs:
When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.
试试这个:
initValueChanges() {
this.addForm.get('includeValidation').valueChanges.subscribe((value) => {
if(value === 'with validation') {
this.addForm.get('amount').setValidators([Validators.required, Validators.min(0.1)]);
} else if(value === 'without validation') {
this.addForm.get('amount').setValue(0);
this.addForm.get('amount').clearValidators();
}
this.addForm.get('amount').updateValueAndValidity(); // <-- added this line
});
}
我有一个包含 2 个字段的表单:
- includeValidation,一个 select 下拉列表(2 个选项):带验证,不带验证
- 金额,输入数字字段
根据第一个下拉列表,我在第二个字段上有验证器:Validators.required、Validators.min(0.1).
我正在尝试使用 clearValidators() 来删除验证,但它只删除了必需的,但没有删除 min(0.1)
当 includeValidation == "without validation" 时如何删除 min(0.1)
formtest.ts
ngOnInit(): void {
this.initForm();
this.initValueChanges();
}
initForm(): void {
this.addForm = this.formBuilder.group({
includeValidation: [''],
amount: [0, [Validators.required, Validators.min(0.1)]]
});
}
initValueChanges() {
this.addForm.get('includeValidation').valueChanges.subscribe((value) => {
if(value === 'with validation') {
this.addForm.get('amount').setValidators([Validators.required, Validators.min(0.1)]);
} else if(value === 'without validation') {
this.addForm.get('amount').setValue(0);
this.addForm.get('amount').clearValidators();
}
});
}
previewSaveButton() {
this.addForm.get('amount').updateValueAndValidity();
if(this.addForm.valid) {
}
}
formtest.html
<form novalidate role="form" name="addForm" [formGroup]="addForm">
<div class="row">
<div class="col-md-12">
<h5>General</h5>
<div class="form-group"><label>include Validation</label>
<select name="includeValidation" class="form-control" formControlName="includeValidation">
<option></option>
<option value="with validation">with validation</option>
<option value="without validation">without validation</option>
</select>
</div>
<div class="form-group"><label>amount</label>
<input name="amount" type="text" class="form-control" formControlName="amount">
</div>
</div>
</div>
<hr />
<div>
<div class="d-flex justify-content-end">
<button type="submit" (click)="previewSaveButton()">Next</button>
</div>
</div>
</form>
无论何时在运行时添加或删除验证器,都必须显式调用 updateValueAndValidity()
。
来自docs:
When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.
试试这个:
initValueChanges() {
this.addForm.get('includeValidation').valueChanges.subscribe((value) => {
if(value === 'with validation') {
this.addForm.get('amount').setValidators([Validators.required, Validators.min(0.1)]);
} else if(value === 'without validation') {
this.addForm.get('amount').setValue(0);
this.addForm.get('amount').clearValidators();
}
this.addForm.get('amount').updateValueAndValidity(); // <-- added this line
});
}