양식 제어를 위한 값 접근자 없음

양식 제어를 위한 값 접근자 없음

이 질문에는 이미 다음과 같은 답이 있습니다.

Angular4 - 폼 제어를 위한 값 접근기 없음 (4개 답변)

마감됨10개월 전에.

Angular2-rc5를 사용하고 있는데 로그인 페이지에 오류가 발생하고 있습니다.양식을 만들려고 하는데 콘솔에서 내 양식을 찾을 수 없다는 예외가 발생합니다.formcontroll비록 내가 그 위에 그것을 만들지만 말입니다.왜 이런 오류가 발생하는지 아십니까?

로그인 구성 요소

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { LoginService } from './login.service';
import { User } from '../../models/user';
    
@Component({
    selector: 'login',
    providers: [LoginService],
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    private loginForm: FormGroup; // our model driven form
    private submitted: boolean; // keep track on whether form is submitted
    private events: any[] = []; // use later to display form changes
    
    constructor(private fb: FormBuilder, private ls:LoginService){}
    ngOnInit(){
        this.loginForm = new FormGroup({
            email: new FormControl('',[<any>Validators.required]),
            password: new FormControl('', [<any>Validators.required, <any>Validators.minLength(6)]),
            rememberMe: new FormControl()
        });
    }
    save(model: User, isValid: boolean) {
        console.log("Test");
        console.log(model, isValid);
    }
    // Login in user
    login(email: any, password: any){
        this.ls.login(email, password, false); 
    }
}

Page.html

<div id="login-page">
    <div class="form-wrapper">
        <form class="login-form" [formGroup]="loginForm" novalidate (ngSubmit)="save(loginForm.value, loginForm.valid)">
            <div >
                <div class="input-field col s12 center">
                    <p class="center login-form-text">Login page</p>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <input id="email" type="email"> 
                    <label class="center-align" for="email" formControlName="email">Email</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <input id="password" type="password"> 
                    <label class="center" for="password" formControlName="password">Password</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12 m12 l12 login-text">
                    <input id="remember-me" type="checkbox" formControlName="rememberMe">
                    <label for="remember-me">Remember me</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <ahref="index.html">Login</a>
                </div>
            </div>
            <div >
                <div >
                    <p><a href="page-register.html">Register Now!</a></p>
                </div>
                <div >
                    <p><a href="page-forgot-password.html">Forgot password ?</a></p>
                </div>
            </div>
        </form>
    </div>
</div>

예외.

예외:잡히지 않음(약속):오류: ./LoginComponent 클래스 LoginComponent - 인라인 템플릿 13:45 오류 발생 원인: 'email' 이름을 가진 폼 컨트롤에 대한 값 액세스자 없음...

다음을 추가하는 중입니다.formControlName입력이 아닌 레이블로 이동합니다.

다음과 같은 이점이 있습니다.

<div >
  <div class="input-field col s12">
    <input id="email" type="email"> 
    <label class="center-align" for="email" formControlName="email">Email</label>
  </div>
</div>

사용해 보십시오.

<div >
  <div class="input-field col s12">
    <input id="email" type="email" formControlName="email"> 
    <label class="center-align" for="email">Email</label>
  </div>
</div>

다른 입력 필드도 업데이트합니다.

각도 재료가 있는 UnitTest angular 2의 경우 가져오기 섹션에 MatSelectModule 모듈을 추가해야 합니다.

import { MatSelectModule } from '@angular/material';

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CreateUserComponent ],
      imports : [ReactiveFormsModule,        
        MatSelectModule,
        MatAutocompleteModule,......

      ],
      providers: [.........]
    })
    .compileComponents();
  }));

앵귤러 9+에서 이것을 경험하는 모든 사람에게.

구성 요소를 선언하지 않거나 구성 요소를 선언하는 모듈을 가져오지 않은 경우에도 이 문제가 발생할 수 있습니다.

사용하려는 상황을 고려해 보겠습니다.ng-select그러나 가져오는 것을 잊으면 Angular는 'No value accessor...'라는 오류를 던집니다..'

저는 아래 스택블리츠 데모에서 이 오류를 재현했습니다.

이 문제가 발생하면 다음 중 하나를 수행합니다.

• formControlName이(가) 값 접근자 요소에 없습니다.
• 또는 해당 요소에 대한 모듈을 가져오지 않습니다.

라벨을 사용해야 하는 경우formControl개미 디자인 확인란과 같은 것입니다.테스트를 실행하는 동안 이 오류가 발생할 수 있습니다.사용할 수 있습니다.ngDefaultControl

<label nz-checkbox formControlName="isEnabled" ngDefaultControl>
    Hello
</label>

<nz-switch nzSize="small" formControlName="mandatory" ngDefaultControl></nz-switch>

저는 이온을 사용하는 경우, 테스트 입력을 재스민 카르마와 결합하려고 했습니다.테스트를 실행하는 동안 카르마 브라우저에서 no value accessor 오류가 발생했습니다.그래서 저는 그냥.ngDefaultControl이온 입력으로 문제를 해결했습니다.

<ion-input class="password" [(ngModel)]="user.password" name="password" 
                type="password" #pw="ngModel" required ngDefaultControl>
</ion-input>

경우에 따라 추가하지 못할 수 있습니다.NG_VALUE_ACCESSOR공급자로서 재사용 가능한 구성 요소에 있습니다.

@Component({
    selector: 'app-reusable',
    templateUrl: './reusable.component.html',
    styleUrls: ['./reusable.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ReusableComponent),
            multi: true,
        },
    ],
})

OR

이동해야 합니다.formControlName="controlName"에게<mat-radio-group>개인에게 묶는 대신 포장지<mat-radio-button>요소

저는 앵귤러 앱에서 프리멩 드롭다운을 사용했습니다.드롭다운 모듈을 가져오지 않았습니다.

제 경우에는 Angular formes를 사용했습니다.contenteditable등의요와 같은 div이전에도 비슷한 문제가 있었습니다.

저는 이 문제를 해결하기 위해 ng-contenteded module을 작성했습니다.

레이블에 formControlName이 표시됩니다. 이를 제거하면 문제가 해결됩니다.

    constructor(
    private cdr: ChangeDetectorRef,
    @Optional() 
    @Self() public ngControl: NgControl,
    ) {

    if (ngControl) {
        ngControl.valueAccessor = this;
      }

}

이 경우 사용자 정의 컨트롤(재사용 가능) 구성 요소의 생성자에 이 줄을 추가합니다.

if (ngControl) {
        ngControl.valueAccessor = this;
      }

저의 경우 이온 데이트 선택기에서만 오류가 발생했습니다. 저는 그것을 가져와야 했습니다.IonicModule 내

언급URL : https://stackoverflow.com/questions/41070478/no-value-accessor-for-form-control