Ответ 1
[ngDefaultControl]
Элементы сторонних разработчиков требуют, чтобы ControlValueAccessor функционировал с формами angular. Многие из них, такие как Polymer <paper-input>, ведут себя как родной элемент <input> и поэтому могут использовать DefaultValueAccessor. Добавление атрибута ngDefaultControl позволит им использовать эту директиву.
<paper-input ngDefaultControl [(ngModel)]="value>
или
<paper-input ngDefaultControl formControlName="name">
Итак, это основная причина, по которой этот attrubute был введен.
Он был назван атрибутом 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, и мы можем использовать этот элемент с формами angular.
В противном случае вы должны предоставить свою собственную реализацию ControlValueAccessor
ControlValueAccessor
Angular состояния документов
A ControlValueAccessor действует как мост между API форм angularи собственный элемент в DOM.
Запишите следующий шаблон в простом приложении angular2:
<input type="text" [(ngModel)]="userName">
Чтобы понять, как будет выглядеть наш input выше, нам нужно знать, какие директивы применяются к этому элементу. Здесь angular выдает некоторый намек на ошибку:
Необработанное отклонение обещаний: ошибки анализа шаблона: не удается привязать к 'ngModel', поскольку он не является известным свойством 'input'.
Хорошо, мы можем открыть SO и получить ответ: import 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});
}
где angular вызывает формы API control.setValue.
Это короткая версия того, как она работает.