+
+## Next steps
+
+
-## Next steps
+## 次のステップ
` element reveals a set of nested message `divs` but only if the `name` is invalid and the control is either `dirty` or `touched`.
+
+ * Each nested `
` can present a custom message for one of the possible validation errors.
+ There are messages for `required`, `minlength`, and `forbiddenName`.
+
+HELPFUL: To prevent the validator from displaying errors before the user has a chance to edit the form, you should check for either the `dirty` or `touched` states in a control.
+
+* When the user changes the value in the watched field, the control is marked as "dirty"
+* When the user blurs the form control element, the control is marked as "touched"
+
+## Validating input in reactive forms
+
+In a reactive form, the source of truth is the component class.
+Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class.
+Angular then calls these functions whenever the value of the control changes.
+
+### Validator functions
+
+Validator functions can be either synchronous or asynchronous.
+
+| Validator type | Details |
+|:--- |:--- |
+| Sync validators | Synchronous functions that take a control instance and immediately return either a set of validation errors or `null`. Pass these in as the second argument when you instantiate a `FormControl`. |
+| Async validators | Asynchronous functions that take a control instance and return a Promise or Observable that later emits a set of validation errors or `null`. Pass these in as the third argument when you instantiate a `FormControl`. |
+
+For performance reasons, Angular only runs async validators if all sync validators pass.
+Each must complete before errors are set.
+
+### Built-in validator functions
+
+You can choose to [write your own validator functions](#defining-custom-validators), or you can use some of Angular's built-in validators.
+
+The same built-in validators that are available as attributes in template-driven forms, such as `required` and `minlength`, are all available to use as functions from the `Validators` class.
+For a full list of built-in validators, see the [Validators](api/forms/Validators) API reference.
+
+To update the actor form to be a reactive form, use some of the same
+built-in validators —this time, in function form, as in the following example.
+
+
+
+const actorForm = new FormGroup({
+ 'name': new FormControl(),
+ 'role': new FormControl(),
+ 'skill': new FormControl()
+});
+
+
+
+Notice that the `name` and `role` are sibling controls.
+To evaluate both controls in a single custom validator, you must perform the validation in a common ancestor control: the `FormGroup`.
+You query the `FormGroup` for its child controls so that you can compare their values.
+
+To add a validator to the `FormGroup`, pass the new validator in as the second argument on creation.
+
+
+
+const actorForm = new FormGroup({
+ 'name': new FormControl(),
+ 'role': new FormControl(),
+ 'skill': new FormControl()
+}, { validators: unambiguousRoleValidator });
+
+
+
+The validator code is as follows.
+
+
+
+
+
+
+### Implementing a custom async validator
+
+In the following example, an async validator ensures that actors are cast for a role that is not already taken.
+New actors are constantly auditioning and old actors are retiring, so the list of available roles cannot be retrieved ahead of time.
+To validate the potential role entry, the validator must initiate an asynchronous operation to consult a central database of all currently cast actors.
+
+The following code creates the validator class, `UniqueRoleValidator`, which implements the `AsyncValidator` interface.
+
+
+interface ActorsService {
+ isRoleTaken: (role: string) => Observable;
+}
+
+
+In a real world application, the `ActorsService` would be responsible for making an HTTP request to the actor database to check if the role is available.
+From the validator's point of view, the actual implementation of the service is not important, so the example can just code against the `ActorsService` interface.
+
+As the validation begins, the `UnambiguousRoleValidator` delegates to the `ActorsService` `isRoleTaken()` method with the current control value.
+At this point the control is marked as `pending` and remains in this state until the observable chain returned from the `validate()` method completes.
+
+The `isRoleTaken()` method dispatches an HTTP request that checks if the role is available, and returns `Observable` as the result.
+The `validate()` method pipes the response through the `map` operator and transforms it into a validation result.
+
+The method then, like any validator, returns `null` if the form is valid, and `ValidationErrors` if it is not.
+This validator handles any potential errors with the `catchError` operator.
+In this case, the validator treats the `isRoleTaken()` error as a successful validation, because failure to make a validation request does not necessarily mean that the role is invalid.
+You could handle the error differently and return the `ValidationError` object instead.
+
+After some time passes, the observable chain completes and the asynchronous validation is done.
+The `pending` flag is set to `false`, and the form validity is updated.
+
+### Adding async validators to reactive forms
+
+To use an async validator in reactive forms, begin by injecting the validator into the constructor of the component class.
+
+
+
+
+
+With reactive forms, set the property in the `FormControl` instance.
+
+
+new FormControl('', {updateOn: 'blur'});
+
+
+## Interaction with native HTML form validation
+
+By default, Angular disables [native HTML form validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) by adding the `novalidate` attribute on the enclosing `