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:
Corbin Crutchley
2022-07-09 03:06:56 -07:00
committed by Corbin Crutchley
parent 84c65b3816
commit 87a7e66132
34 changed files with 372 additions and 372 deletions

View File

@@ -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.