Qu'est-ce que ngDefaultControl Angulaire?

[ngDefaultControl]

Tiers contrôles nécessitent un ControlValueAccessor pour fonctionner avec des formes angulaires. Beaucoup d'entre eux, à l'instar du Polymère <paper-input>, se comportent comme de l' <input> élément naturel et peut donc utiliser le DefaultValueAccessor. L'ajout d'un ngDefaultControl attribut va leur permettre d'utiliser cette directive.

<paper-input ngDefaultControl [(ngModel)]="value>

ou

<paper-input ngDefaultControl formControlName="name">

C'est donc la raison principale de cette attrubute a été introduit.

Il a été appelé ng-default-control attribut dans les versions alpha de angular2.

Donc ngDefaultControl est l'un des sélecteurs pour DefaultValueAccessor directive:

@Directive({
  selector:
      'input:not([type=checkbox])[formControlName],
       textarea[formControlName],
       input:not([type=checkbox])[formControl],
       textarea[formControl],
       input:not([type=checkbox])[ngModel],
       textarea[ngModel],
       [ngDefaultControl]', <------------------------------- this selector
  ...
})
export class DefaultValueAccessor implements ControlValueAccessor {

Ça veut dire quoi?

Cela signifie que nous pouvons appliquer cet attribut à l'élément(comme composant polymère) qui ne possède pas sa propre valeur accesseur. De sorte que cet élément va prendre le comportement de DefaultValueAccessor et nous pouvons utiliser cet élément avec des formes angulaires.

Sinon, vous devez fournir votre propre mise en œuvre de ControlValueAccessor

ControlValueAccessor

Angulaire docs unis

Un ControlValueAccessor agit comme un pont entre les formes Angulaires de l'API
et un natif de l'élément dans le DOM.

Nous allons écrire le modèle suivant en simple angular2 application:

<input type="text" [(ngModel)]="userName">

Pour comprendre comment nos input ci-dessus va se comporter nous avons besoin de savoir qui sont appliquées les directives à cet élément. Ici angulaire donne quelque astuce avec l'erreur:

Non gérée Promesse de rejet: Modèle erreurs d'analyse: ne Peut pas se lier à
'ngModel', car il n'est pas connu de la propriété de 'entrée'.

Bon, on peut ouvrir de la SORTE et obtenir la réponse: l'importation FormsModule à votre @NgModule:

@NgModule({
  imports: [
    ...,
    FormsModule
  ]
})
export AppModule {}

Nous avons importé et tout fonctionne comme prévu. Mais que se passe sous le capot?

FormsModule exportations pour nous, les directives suivantes:

@NgModule({
 ...
  exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
})
export class FormsModule {}

Après quelques recherches, on découvre que les trois directives seront appliquées à notre input

1) NgControlStatus

@Directive({
  selector: '[formControlName],[ngModel],[formControl]',
  ...
})
export class NgControlStatus extends AbstractControlStatus {
  ...
}

2) NgModel

@Directive({
  selector: '[ngModel]:not([formControlName]):not([formControl])',
  providers: [formControlBinding],
  exportAs: 'ngModel'
})
export class NgModel extends NgControl implements OnChanges, 

3) DEFAULT_VALUE_ACCESSOR

@Directive({
  selector:
      `input:not([type=checkbox])[formControlName],
       textarea[formControlName],
       input:not([type=checkbox])formControl],
       textarea[formControl],
       input:not([type=checkbox])[ngModel],
       textarea[ngModel],[ngDefaultControl]',
  ,,,
})
export class DefaultValueAccessor implements ControlValueAccessor {

NgControlStatus directive juste manipule des classes comme ng-valid, ng-touched, ng-dirty et nous pouvons omettre ici.

---

DefaultValueAccesstor fournit NG_VALUE_ACCESSOR jeton dans les fournisseurs de tableau:

export const DEFAULT_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DefaultValueAccessor),
  multi: true
};
...
@Directive({
  ...
  providers: [DEFAULT_VALUE_ACCESSOR]
})
export class DefaultValueAccessor implements ControlValueAccessor {

NgModel directive injecte dans le constructeur NG_VALUE_ACCESSOR jeton qui a été déclaré sur le même hôte élément.

export NgModel extends NgControl implements OnChanges, OnDestroy {
 constructor(...
  @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {

Dans notre cas NgModel va injecter DefaultValueAccessor. Et maintenant NgModel directive appels partagé setUpControl fonction:

export function setUpControl(control: FormControl, dir: NgControl): void {
  if (!control) _throwError(dir, 'Cannot find control with');
  if (!dir.valueAccessor) _throwError(dir, 'No value accessor for form control with');

  control.validator = Validators.compose([control.validator !, dir.validator]);
  control.asyncValidator = Validators.composeAsync([control.asyncValidator !, dir.asyncValidator]);
  dir.valueAccessor !.writeValue(control.value);

  setUpViewChangePipeline(control, dir);
  setUpModelChangePipeline(control, dir);

  ...
}

function setUpViewChangePipeline(control: FormControl, dir: NgControl): void 
{
  dir.valueAccessor !.registerOnChange((newValue: any) => {
    control._pendingValue = newValue;
    control._pendingDirty = true;

    if (control.updateOn === 'change') updateControl(control, dir);
  });
}

function setUpModelChangePipeline(control: FormControl, dir: NgControl): void {
  control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
    //control -> view
    dir.valueAccessor !.writeValue(newValue);

    //control -> ngModel
    if (emitModelEvent) dir.viewToModelUpdate(newValue);
  });
}

Et voici le pont en action:

NgModel met en place le contrôle (1) et les appels dir.valueAccessor !.registerOnChange méthode. ControlValueAccessor magasins de rappel dans onChange(2) des biens et des feux de cette fonction de rappel lorsque input événement se produit (3). Et enfin updateControl fonction est appelée à l'intérieur de rappel (4)

function updateControl(control: FormControl, dir: NgControl): void {
  dir.viewToModelUpdate(control._pendingValue);
  if (control._pendingDirty) control.markAsDirty();
  control.setValue(control._pendingValue, {emitModelToViewChange: false});
}

où angulaire appels formes API control.setValue.

C'est une version courte de la façon dont il fonctionne.