我有一個用于選擇日期的輸入欄位。我想應用簡單的驗證，如果此欄位為空，則提交按鈕應在填充時禁用并啟用，并且應保持同步。
日期欄位有一些問題，當我通過 ng-valid 檢查時，如果沒有在日期欄位中輸入任何內容，它應該給出 false，但它從一開始就給出 true。
我使用 StackBlitz 創建了一個簡單的示例，它具有單個日期輸入，現在我需要在輸入欄位為空時禁用它，并在輸入填充時激活它。
https://stackblitz.com/edit/ngx-daterangepicker-material-for-angular8-5ikovy?file=src/app/app.component.html
uj5u.com熱心網友回復：
這是由于日期選擇器部分的執行不力。默認情況下，他們將控制元件的值設定為{start: null, end: null}. https://stackblitz.com/edit/ngx-daterangepicker-material-for-angular8-fa73zq?file=src/app/app.component.html
默認required驗證器檢查controlValue == null庫設定為控制元件的物件是否不為空。如果你需要使用這個庫，你需要撰寫你的自定義驗證器來檢查兩者start是否end為空，如果是，它應該回傳一個錯誤。
你在這里檢查如何做到這一點：https ://angular.io/guide/form-validation#adding-custom-validators-to-template-driven-forms
uj5u.com熱心網友回復：
默認情況下，當您的輸入日期為空時，其值為{ "start": null, "end": null }. 所以“必需”驗證器不會使值無效，因為這是一個有效的物件。
一個簡單的修復方法：
<button
[disabled]="!(date.value.start && date.value.end)"
>...</button>
uj5u.com熱心網友回復：
正如其他人所提到的，這是由于值為{ start: null, end: null }。您可以通過創建自定義驗證器來解決此問題 - 這樣做的好處是您的表單的有效狀態將是正確的。
您可以將驗證器定義為如下指令（您的日期選擇器包中可能已經存在一個介面，因此可能不需要該部分）：
interface DateRange {
start: Moment | null;
end: Moment | null;
}
@Directive({
selector: '[appDateRange]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: DateRangeValidatorDirective,
multi: true,
},
],
})
export class DateRangeValidatorDirective implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return this.dateRangeValidator(control);
}
dateRangeValidator: ValidatorFn = (
control: AbstractControl
): ValidationErrors | null => {
if (!control.value) return null;
const dateRange = control.value as DateRange;
console.log('VALIDATE', dateRange);
return dateRange.start && dateRange.end ? null : { dateRange: true };
};
}
確保在你的模塊中也定義這個：
@NgModule({
declarations: [
...
DateRangeValidatorDirective
]
...
})
然后，您可以使用它，就像required使用指令選擇器 ( appDateRange) 對輸入的驗證器一樣：
<input ... appDateRange>
所以你的按鈕上可以有：
<button ... [disabled]="date.errors?.required && date.errors?.dateRange"> ...
如果您想了解更多相關資訊，這里有一個很好的示例https://angular.io/guide/form-validation，頁面上的禁止名稱驗證器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/477803.html
標籤：有角度的