FormControlDirectivelink

说明link

Registering a single form controllink

The following examples shows how to register a standalone control and set its value.

      
        content_copy
      
      
import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
 
@Component({
  selector: 'example-app',
  template: `
     <input [formControl]="control">
      
     <p>Value: {{ control.value }}</p>
     <p>Validation status: {{ control.status }}</p>
     
     <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleFormControl {
  control: FormControl = new FormControl('value', Validators.minLength(2));
 
  setValue() { this.control.setValue('new value'); }
}
    

Use with ngModellink

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

Now deprecated:

      
        content_copy
      
      <input [formControl]="control" [(ngModel)]="value">
    

      
        content_copy
      
      this.value = 'some value';
    

This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual ngModel directive is being used, but in fact it's an input/output property named ngModel on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of ngModel's other features - like delaying updates withngModelOptions or exporting the directive - simply don't work, which has understandably caused some confusion.

In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template.

To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.

After (choice 1 - use reactive forms):

      
        content_copy
      
      <input [formControl]="control">
    

      
        content_copy
      
      this.control.setValue('some value');
    

After (choice 2 - use template-driven forms):

      
        content_copy
      
      <input [(ngModel)]="value">
    

      
        content_copy
      
      this.value = 'some value';
    

By default, when you use this pattern, you will see a deprecation warning once in dev mode. You can choose to silence this warning by providing a config for ReactiveFormsModule at import time:

      
        content_copy
      
      imports: [
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
    

Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of "always". This may help to track down where in the code the pattern is being used as the code is being updated.