각도에서 ngDefaultControl이란 무엇입니까?

각도에서 ngDefaultControl이란 무엇입니까?

아니요, 중복 질문이 아닙니다.와 Github에 대한 처럼 쌓여 . SO와 Github에는 와 Github이 태그에 이.[(ngModel)]지시문이며 양식에 포함되지 않습니다.추가하지 않으면 다음 오류가 발생합니다.

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

좋아요, 여기에 이 속성을 넣으면 오류가 사라집니다. 하지만, 잠깐만요!아무도 그것이 무엇을 하는지 모릅니다!Angular의 의사는 그것에 대해 전혀 언급하지 않습니다.가치 접근자가 필요하지 않다는 것을 알면서도 가치 접근자가 필요한 이유는 무엇입니까?이 속성은 가치 접근자와 어떻게 연결됩니까?이 지시는 무엇을 합니까?가치 접근자란 무엇이며 어떻게 사용합니까?

그리고 왜 모든 사람들은 전혀 이해할 수 없는 일들을 계속하는 것일까요?이 코드 라인을 추가하면 작동합니다. 감사합니다. 이것은 좋은 프로그램을 만드는 방법이 아닙니다.

그리고 나서.나는 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-controlangular2의 알파 버전 속성입니다.

그렇게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는 Angular form API와 DOM의 기본 요소 사이에서 브리지 역할을 합니다.

간단한 angular2 어플리케이션으로 다음 템플릿을 작성해 보겠습니다.

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

우리의 방식을 이해하는 것.input위에서 우리는 이 요소에 어떤 지시가 적용되는지 알아야 합니다.다음 각도는 오류와 함께 힌트를 제공합니다.

처리되지 않은 약속 거부:템플릿 구문 분석 오류: 'input'의 알려진 속성이 아니므로 'ngModel'에 바인딩할 수 없습니다.

좋아요, SO를 열고 다음과 같은 대답을 얻을 수 있습니다: 가져오기FormsModule당신에게@NgModule:

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

우리는 그것을 수입했고 모든 것이 의도한 대로 작동합니다.하지만 후드 아래는 어떻게 된 거지?

FormsModule은 다음과 같은 지침을 제공합니다.

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

몇 가지 조사를 한 후에 우리는 세 가지 지침이 우리 회사에 적용될 것이라는 것을 발견할 수 있습니다.input

1. NgControl 상태

   @지시({selector: '[formControlName]], [ngModel], [formControl], ...}) 내보내기 클래스 NgControlStatus가 AbstractControlStatus {...를 확장합니다.}

2. Ng모델

   @Directive({selector: '[ngModel]: not([formControlName]): not([formControlBinding]), 공급자: [formControlBinding]), exportAs: 'ngModel'} 내보내기 클래스 NgModel은 변경 시 NgControl 구현을 확장합니다.

3. DEFAULT_VALUE_ACCESSOR

   @Directive({selector: 'input:not([type=filename]), textarea[formControlName], input:not([type=filename]), textarea[formControlControl], input:not([type=formControl]), textarea[ngModel], textarea[ngModel], [ngDefaultControlValAccessor], {}},},}, {},},},}, {}, 즉 클래스

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속성 및 이 콜백을 실행할 때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.

그것은 작동 방식에 대한 짧은 버전입니다.

언급URL : https://stackoverflow.com/questions/46465891/what-is-ngdefaultcontrol-in-angular