Requirements: In daily front-end development, forms are often used to add and edit data through forms. An instance of a FormGroup can track a set of FormControl instances, and when a FormGroup is created, each control in it can be tracked by its name. How do I customize a form control?
Let's take a look at the renderings first:
The steps are as follows:
- Inherits the ControlValueAccessor interface
- Register with a NG_VALUE_ACCESSOR provider
Inherits the ControlValueAccessor interface
The ControlValueAccessor interface defines 4 methods, as follows:
- writeValue: Any value action that explicitly calls the FormControl API will call the writeValue() method of the custom form control and pass the new value in as a parameter. What it does is set the value of the native form control. The data flow is from Angular form -> Native form (custom control).
- registerOnChange: registers the onChange event, which is called at initialization and is an event trigger function. What is the use of this event trigger function? We first need to save the event trigger function in registerOnChange and call it when the time is right (for example, when the control receives user input and needs to respond). You can understand this function as "an API used by the caller to notify the control when there is a change in the form data in the control", that is, to synchronize the information in the control. The parameter of this event function is the value that the Angular form is to receive. Data flow from Native form (custom control) -> Angular form.
- registerOnTouched: Registers the onTouched event, which is a callback function that is triggered when a user interacts with a control. This function is used to notify the form control that it is already touched to update the internal state of the bound FormContorl. Data flow from Native form (custom control) -> Angular form.
- setDisabledState: When the form state changes to or from DISABLED, the form API calls the setDisabledState() method to enable or disable the corresponding DOM element. The data flow is from Angular form -> Native form (custom control).
The interaction is shown below:
In fact, native form controls also have interfaces similar to ControlValueAccessor, for example, when Angular encounters input or textarea DOM native controls in component templates, it will use the DefaultValueAccessor command.
Accessor | Form Element | DefaultValueAccessor | input,textarea | CheckboxControlValueAccessor | input[type=checkbox] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | select | SelectMultipleControlValueAccessor | select[multiple] |
The above is the Angular form control that Angular created for all native DOM form elements, namely the built-in ControlValueAccessor.
Documentation:The hyperlink login is visible.
Register with a NG_VALUE_ACCESSOR provider
After implementing the ControlValueAccessor interface, we also need to register it as a NG_VALUE_ACCESSOR, so that the custom form control can be recognized and integrated by Angular, otherwise it will get an error "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Documentation:The hyperlink login is visible.
encode
According to the steps, the complete coding work, the effect is the initial rendering, the code is as follows.
HTML page:
TS Code:
Reference:
The hyperlink login is visible.
The hyperlink login is visible. |
Posted on 2025-4-30 16:00:55
|
|
|
|
