Що таке ngDefaultControl у кутовому?

Ні, це не повторне запитання. Розумієте, в SO та Github є багато питань і питань, які передбачають, що я додаю цю директиву до тегу, який має [(ngModel)]директиву і не міститься у формі. Якщо я не додаю його, я отримую помилку:

ERROR Error: No value accessor for form control with unspecified name attribute

Гаразд, помилка відпадає, якщо я помістив туди цей атрибут. АЛЕ, почекай! Ніхто не знає, що це робить! І доктор Angular зовсім не згадує про це. Навіщо мені потрібен ціннісний аксесуар, коли я знаю, що він мені не потрібен? Як цей атрибут пов'язаний з ціннісними аксесуарами? Що робить ця директива? Що таке аксесуар значення та як ним користуватися?

І чому всі продовжують робити те, що вони не всі розуміють? Просто додайте цей рядок коду, і він працює, дякую, це не спосіб писати хороші програми.

І потім. Я прочитав не один, а два величезні довідники про форми у кутовій та розділ про ngModel:

• https://angular.io/guide/forms
• https://angular.io/guide/reactive-forms
• https://angular.io/guide/template-syntax#ngModel

А ви знаєте що? Жодної згадки ні про засоби доступу, ні про ngDefaultControl. Де це?

[ngDefaultControl]

Сторонні органи управління вимагають ControlValueAccessorфункціонування з кутовими формами. Багато з них, як і полімерні <paper-input>, поводяться як <input>рідний елемент і тому можуть використовувати його DefaultValueAccessor. Додавання ngDefaultControlатрибуту дозволить їм використовувати цю директиву.

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

або

<paper-input ngDefaultControl formControlName="name">

Тож це головна причина, чому цей втручання було введено.

Його називали ng-default-controlатрибутом в альфа-версіях angular2 .

Так ngDefaultControlє одним із селекторів для директиви DefaultValueAccessor :

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

Що це означає?

Це означає, що ми можемо застосувати цей атрибут до елемента (наприклад, полімерний компонент), який не має власного доступу. Тож цей елемент буде приймати поведінку, DefaultValueAccessorі ми можемо використовувати цей елемент з кутовими формами.

В іншому випадку ви повинні забезпечити власну реалізацію ControlValueAccessor

ControlValueAccessor

Кутові документи

ControlValueAccessor виступає мостом між API кутових форм та нативним елементом у DOM.

Запишемо наступний шаблон у простій програмі angular2:

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

Щоб зрозуміти, як inputповодиться наше вище, нам потрібно знати, які директиви застосовуються до цього елемента. Тут кутовий дає деякий натяк на помилку:

Невідпрацьоване відхилення обіцянки: Помилки аналізу шаблону: Неможливо прив’язати до 'ngModel', оскільки це не відома властивість 'input'.

Гаразд, ми можемо відкрити SO та отримати відповідь: імпортувати FormsModuleдо вашого @NgModule:

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

Ми імпортували його та все працює за призначенням. Але що відбувається під капотом?

FormsModule експортує для нас наступні директиви:

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

Після деякого розслідування ми зможемо виявити, що до нашої буде застосовано три директиви 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Директива просто маніпулює класи , як ng-valid, ng-touched, ng-dirtyі ми можемо опустити його тут.

DefaultValueAccesstorнадає NG_VALUE_ACCESSORмаркер у масиві постачальників:

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директива вводить в NG_VALUE_ACCESSORмаркер конструктора, який був оголошений на тому ж хост-елементі.

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

У нашому випадку NgModelбуде вводити DefaultValueAccessor. А тепер директива NgModel називає спільну setUpControlфункцію:

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);
  });
}

А ось міст у дії:

NgModelвстановлює контроль (1) та dir.valueAccessor !.registerOnChangeметод виклику . ControlValueAccessorзберігає зворотний виклик у onChange(2) властивості та запускає цей зворотний виклик, коли inputвідбувається подія (3) . І нарешті updateControlфункція викликається всередині зворотного виклику (4)

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

де кутові виклики формують API control.setValue.

Це коротка версія того, як це працює.