mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-09 21:07:49 +00:00
chore: migrate our headers to use more standard ID setting
This migration was done using a regex:
`(#\s+)([^{]+?)\s+\{(#.*?)\}`
And replacing with:
`$1[$2]($3)`
This commit is contained in:
committed by
Corbin Crutchley
parent
84c65b3816
commit
87a7e66132
@@ -18,7 +18,7 @@ More than that, if you want more powerful functionality, such as disabling an en
|
||||
|
||||
These features are hugely helpful when dealing with complex form logic throughout your application. Luckily for us, they're not just exclusive to native elements - we can implement this functionality into our own form!
|
||||
|
||||
# Example {#code-demo}
|
||||
# [Example](#code-demo)
|
||||
|
||||
It's hard for us to talk about the potential advantages to a component without taking a look at it. Let's start with this component, just for fun.
|
||||
|
||||
@@ -74,7 +74,7 @@ With only a bit of CSS, we have a visually appealing, A11Y friendly, and quirky
|
||||
|
||||
Now, this component is far from feature complete. There's no way to `disable` the input, there's no way to extract data out from the typed input, there's not a lot of functionality you'd typically expect to see from an input component. Let's change that.
|
||||
|
||||
# ControlValueAccessor {#intro-concept}
|
||||
# [ControlValueAccessor](#intro-concept)
|
||||
|
||||
Most of the expected form functionality will come as a complement of [the `ControlValueAccessor` interface](https://angular.io/api/forms/ControlValueAccessor). Much like you implement `ngOnInit` by implementing class methods, you do the same with ControlValueAccessor to gain functionality for form components.
|
||||
|
||||
@@ -87,7 +87,7 @@ The methods you need to implement are the following:
|
||||
|
||||
Let's go through these one-by-one and see how we can introduce change to our component to support each one.
|
||||
|
||||
## Setup {#forwardRef}
|
||||
## [Setup](#forwardRef)
|
||||
|
||||
To use these four methods, you'll first need to `provide` them somehow. To do this, we use a combination of the component's `providers` array, `NG_VALUE_ACCESSOR`, and `forwardRef`.
|
||||
|
||||
@@ -131,7 +131,7 @@ With this, we'll finally be able to use these methods to control our component.
|
||||
> If you're wondering why you don't need to do something like this with `ngOnInit`, it's because that functionality is baked right into Angular. Angular _always_ looks for an `onInit` function and tries to call it when the respective lifecycle method is run. `implements` is just a type-safe way to ensure that you're explicitly wanting to call that method.
|
||||
|
||||
|
||||
## `writeValue` {#write-value}
|
||||
## [`writeValue`](#write-value)
|
||||
|
||||
`writeValue` is a method that acts exactly as you'd expect it to: It simply writes a value to your component's value. As your value has more than a single write method (from your component and from the parent), it's suggested to have a setter, getter, and private internal value for your property.
|
||||
|
||||
@@ -171,7 +171,7 @@ export class ExampleInputComponent implements ControlValueAccessor {
|
||||
|
||||
Now, when we use a value like `new FormValue('test')` and pass it as `[formControl]` to our component, it will render the correct default value
|
||||
|
||||
## `setDisabledState` {#disabled-state}
|
||||
## [`setDisabledState`](#disabled-state)
|
||||
|
||||
Implementing the disabled state check is extremely similar to [implementing value writing](#write-value). Simply add a setter, getter, and `setDisabledState` to your component, and you should be good-to-go:
|
||||
|
||||
@@ -194,7 +194,7 @@ Just as we did with value writing, we want to run a `markForCheck` to allow chan
|
||||
|
||||
> It's worth mentioning that unlike the other three methods, this one is entirely optional for implementing a `ControlValueAccessor`. This allows us to disable the component or keep it enabled but is not required for usage with the other methods. `ngModel` and `formControl` will work without this method implemented.
|
||||
|
||||
## `registerOnChange` {#register-on-change}
|
||||
## [`registerOnChange`](#register-on-change)
|
||||
|
||||
While the previous methods have been implemented in a way that required usage of `markForCheck`, these last two methods are implemented in a bit of a different way. You only need look at the type of the methods on the interface to see as much:
|
||||
|
||||
@@ -224,7 +224,7 @@ While this code sample shows you how to store the function, it doesn't outline h
|
||||
/>
|
||||
```
|
||||
|
||||
## `registerOnTouched` {#register-on-touched}
|
||||
## [`registerOnTouched`](#register-on-touched)
|
||||
|
||||
Like how you [store a function and call it to register changes](#register-on-change), you do much of the same to register when a component has been "touched" or not. This tells your consumer when a component has had interaction or not.
|
||||
|
||||
@@ -248,7 +248,7 @@ You'll want to call this `onTouched` method any time that your user "touches" (o
|
||||
/>
|
||||
```
|
||||
|
||||
# Consumption {#consume-demo}
|
||||
# [Consumption](#consume-demo)
|
||||
|
||||
Now that we've done that work let's put it all together, apply [the styling from before](#code-demo), and consume the component we've built!
|
||||
|
||||
@@ -319,7 +319,7 @@ These classes include:
|
||||
|
||||
They reflect states so that you can update the visuals in CSS to reflect them. When using `[(ngModel)]`, they won't appear, since nothing is tracking when a component is `pristine` or `dirty`. However, when using `[formControl]` or `[formControlName]`, these classes _will_ appear and act accordingly, thanks to the `registerOnChange` and `registerOnTouched` functions. As such, you're able to display custom CSS logic for when each of these states are met.
|
||||
|
||||
# Gain Access To Form Control Errors {#form-control-errors}
|
||||
# [Gain Access To Form Control Errors](#form-control-errors)
|
||||
|
||||
Something you'll notice that wasn't implemented in the `ControlValueAccessor` implementation is support for checking whether validators are applied. If you're a well-versed Angular Form-ite, you'll recall the ability to [validate forms using validators appended to `FormControl`s](https://angular.io/guide/form-validation). Although a niche situation — since most validation happens at the page level, not the component level — wouldn't it be nice to check when a form is valid or not directly from the component to which the form is attached?
|
||||
|
||||
@@ -412,7 +412,7 @@ export class AppComponent {
|
||||
|
||||
Not only do you have [a wide range of Angular-built validators at your disposal](https://angular.io/api/forms/Validators), but you're even able to [make your own validator](https://angular.io/api/forms/Validator)!
|
||||
|
||||
# Conclusion {#conclusion}
|
||||
# [Conclusion](#conclusion)
|
||||
|
||||
Enabling `formControl` and `ngModel` usage is an extremely powerful tool that enables you to have feature-rich and consistent APIs across your form components. Using them, you can ensure that your consumers are provided with the functionality they'd expect in a familiar API to native elements. Hopefully, this article has provided you with more in-depth insight that you're able to use with your own components.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user