如何從 angular 6 的組件在模板驅動的表單中添加驗證

Question

在 angular 6 中，我們有兩種方法來創建表單。

1. 模型驅動
2. 模板驅動

在模型驅動的方法中，我們通過組件中的代碼定義了驗證器。 在模板驅動的方法中，我們通過模板本身中的指令和 HTML5 屬性定義驗證器。

有沒有什么辦法，在模板驅動的表單中，我們可以從組件代碼中定義驗證。

我需要在某些輸入測試更改時從組件代碼定義和更改文本框的驗證。

<input type="text" [(ngModel)]="value" (input)="ValueChangeEvent(myvalue)" /> 

這里，在ValueChangeEvent方法中，我需要更改我的文本框的驗證。（例如，當用戶輸入內容時，我只需要在文本框中添加最小值驗證。）

Answer 1

使用 ControlValueAccessor 在 Angular 中創建自定義表單控件

ControlValueAccessor 充當 Angular 表單 API 和 DOM 中的原生元素之間的橋梁。

在 Angular 中創建表單時，有時您希望輸入不是標准文本輸入、選擇或復選框。 通過實現 ControlValueAccessor 接口並將組件注冊為 NG_VALUE_ACCESSOR，您可以將自定義表單控件無縫集成到模板驅動或響應式表單中，就像它是本機輸入一樣！

檢查這個： https : //alligator.io/angular/custom-form-control/

customFormValidation 示例： https ://stackblitz.com/edit/angular-hhgkje