javascript - Ingen värdetillgång för formulärkontroll

Jag använder Angular2-rc5, och jag får för närvarande ett fel på min inloggningssida. Jag försöker skapa ett formulär men konsolen kastar undantag som säger att den inte kan hitta mina formcontrolls även om jag skapar det vid initiering. Någon idé varför jag får detta fel?

inloggningskomponent

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

Sida.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>

Undantag

UNDANTAG: Okänt (i löfte): Fel: Fel i ./LoginComponent klass LoginComponent - inline-mall:13:45 orsakad av: Ingen värdeadapter för formulärkontroll med namn: 'email'.....

Svar #1

Du lägger till formControlName på etiketten och inte på inmatningsfältet.

Du har detta:

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

Prova att använda detta:

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

Uppdatera de andra inmatningsfälten också.

Svar #2

För UnitTest Angular 2 med Angular Material måste du lägga till MatSelectModule-modulen i imports-sektionen.

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

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

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

Svar #3

För alla som upplever detta i angular 9+

Detta problem kan också upplevas om du inte deklarerar din komponent eller importerar modulen som deklarerar komponenten.

Låt oss överväga en situation där du tänker använda ng-select men glömmer att importera det. Angular kommer att kasta felet 'No value accessor...'

Jag har återskapat detta fel i demoen på Stackblitz nedan.

Svar #4

Om du får detta problem, då antingen

  • formControlName finns inte på värdetillgångselementet.
  • eller så importerar du inte modulen för det elementet.

Svar #5

Om du måste använda etiketten för formControl. Som Ant Design Checkbox. Det kan ge detta fel när du kör tester. Du kan använda ngDefaultControl

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

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

Svar #6

I vissa fall kan du ha missat att lägga till NG_VALUE_ACCESSOR i den återanvändbara komponenten som leverantör.

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

Relaterade artiklar