LỖI Lỗi: Không có trình truy cập giá trị cho điều khiển biểu mẫu với thuộc tính tên không xác định trên công tắc

Đây là thành phần của tôi trong Angular 4:

@Component( {
    selector: 'input-extra-field',
    template: `
            <div class="form-group" [formGroup]="formGroup" >
                <switch [attr.title]="field.etiquette" 
                    [attr.value]="field.valeur" [(ngModel)]="field.valeur"
                    [formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">
                </switch>
                <error-messages [control]="name"></error-messages>
            </div>
    `
} )

Đây là Lớp của tôi:

export class SwitchExtraField extends ExtraField {
    @Input() field: ExtraFormField;
    @Input() entity: { fields: Object };
    @Input() formGroup: FormGroup;

    constructor( formDir: NgForm ) {
        super( null, null, formDir );
    }

    get disabled(): string {
        if ( this.field && !!this.field.saisissable && !this.field.saisissable )     {
            return 'disabled';
        }
        return null;
    }
}

Đây là lỗi tôi gặp phải khi biên dịch:

ERROR Error: No value accessor for form control with unspecified name attribute
    at _throwError (forms.es5.js:1918)
    at setUpControl (forms.es5.js:1828)
    at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)

Khi tôi thay đổi công tắc phần tử thành đầu vào, nó hoạt động, biết rằng tôi đang sử dụng cùng một cấu trúc cho các thành phần khác và nó hoạt động tốt.

Tôi đã sửa lỗi này bằng cách thêm các name="fieldName" ngDefaultControlthuộc tính vào phần tử mang [(ngModel)]thuộc tính.

Tôi đã gặp vấn đề tương tự và vấn đề là thành phần con của tôi có @inputtên formControl.

Vì vậy, tôi chỉ cần thay đổi từ:

<my-component [formControl]="formControl"><my-component/>

đến:

<my-component [control]="control"><my-component/>

ts:

@Input()
control:FormControl;

Tôi cũng gặp lỗi này khi viết thành phần điều khiển biểu mẫu tùy chỉnh trong Angular 7. Tuy nhiên, không có câu trả lời nào áp dụng được cho Angular 7.

Trong trường hợp của tôi, cần thêm những thứ sau vào trình @Componenttrang trí:

  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomComponent),  // replace name as appropriate
      multi: true
    }
  ]

Đây là trường hợp "Tôi không biết tại sao nó hoạt động, nhưng nó có." Đánh dấu nó là thiết kế / triển khai kém trên một phần của Angular.

Tôi cũng gặp lỗi tương tự, góc 7

 <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  class="dropdown-item fontstyle"
     *ngFor="let city of Cities; let i = index">
      {{city.name}}
 </button>

Tôi vừa thêm ngDefaultControl

   <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  ngDefaultControl class="dropdown-item fontstyle"
 *ngFor="let city of Cities; let i = index">
  {{city.name}}

Tôi cũng mắc phải lỗi này- Tôi đã vô tình liên kết [(ngModel)] với của tôi mat-form-fieldthay vì inputphần tử.

Tôi nhận được thông báo lỗi này trong bài kiểm tra Đơn vị của tôi với Jasmine. Tôi đã thêm thuộc tính ngDefaultControl vào phần tử tùy chỉnh (trong trường hợp của tôi, đó là một chuyển đổi trượt vật liệu góc cạnh) và điều này giải quyết được lỗi.

<mat-slide-toggle formControlName="extraCheese">
  Extra Cheese
</mat-slide-toggle>

Thay đổi phần tử trên để bao gồm thuộc tính ngDefaultControl

<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
 Extra Cheese
</mat-slide-toggle>

Trong trường hợp của tôi, tôi đã chèn [(ngModel)] vào nhãn thay vì nhập. Cũng có một cảnh báo, tôi đã thử chạy theo đúng lỗi ở trên trong dòng được chỉ định nhưng lỗi không biến mất. Nếu có những nơi khác mà bạn đã phạm cùng một lỗi, nó vẫn ném cho bạn cùng một lỗi ở cùng một dòng

Tôi đã gặp phải lỗi này khi chạy các trường hợp Kiểm tra Đơn vị Karma Thêm MatSelectModule trong nhập sẽ khắc phục sự cố

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],

Điều này thật là ngu ngốc, nhưng tôi nhận được thông báo lỗi này do vô tình sử dụng [formControl]thay vì [formGroup]. Xem tại đây:

SAI LẦM

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formControl]="formGroup"> <!-- '[formControl]' IS THE WRONG ATTRIBUTE -->
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

ĐÚNG

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formGroup]="formGroup"> <!-- '[formGroup]' IS THE RIGHT ATTRIBUTE -->
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

Trong trường hợp của tôi, tôi đã sử dụng chỉ thị, nhưng chưa nhập nó vào tệp module.ts của mình. Nhập đã sửa nó.

Tôi đã gặp lỗi tương tự này, tôi có một trường đầu vào được đặt tên controltrong Thành phần biểu mẫu tùy chỉnh của mình nhưng vô tình chuyển điều khiển trong đầu vào có tên formControl. Hy vọng không ai phải đối mặt với vấn đề đó.

Trong trường hợp của tôi, điều đó thật dễ hiểu khi tôi đã đăng ký thành phần mới cho DI trong các app.module.tstờ khai của tôi nhưng không phải trong xuất khẩu.

Trong trường hợp của tôi, nó đang xảy ra trong mô-đun được chia sẻ của tôi và tôi phải thêm phần sau vào @NgModule:

...
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule
  ],
...

Đã dành rất nhiều giờ để làm cho nó hoạt động. Hy vọng điều này sẽ giúp một số người khác đang đấu tranh với lỗi như vậy.

Tôi đã gặp lỗi tương tự, nhưng trong trường hợp của tôi rõ ràng đó là sự cố đồng bộ hóa, tại thời điểm hiển thị các thành phần html.

Tôi đã làm theo một số giải pháp được đề xuất trên trang này nhưng bất kỳ giải pháp nào trong số chúng đều hiệu quả với tôi, ít nhất là không hoàn toàn.

Điều thực sự đã giải quyết được lỗi của tôi là viết đoạn mã bên dưới bên trong thẻ html cha của các phần tử.

Tôi đã ràng buộc với biến.

Mã:

    *ngIf="variable-name"

Lỗi được gây ra, rõ ràng là do dự án cố gắng kết xuất trang, rõ ràng là tại thời điểm đánh giá biến, dự án không thể tìm thấy giá trị của nó. Với đoạn mã trên, bạn đảm bảo rằng trước khi hiển thị trang, bạn hỏi xem biến đã được khởi chạy chưa.

Đây là mã component.ts của tôi:

import { Component, OnInit } from '@angular/core';
import { InvitationService } from 'src/app/service/invitation.service';
import { BusinessService } from 'src/app/service/business.service';
import { Invitation } from 'src/app/_models/invitation';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
  selector: 'app-invitation-details',
  templateUrl: './invitation-details.component.html',
  styleUrls: ['./invitation-details.component.scss']
})
export class InvitationDetailsComponent implements OnInit {
  invitationsList: any;
  currentInvitation: any;
  business: any;
  invitationId: number;
  invitation: Invitation;

  constructor(private InvitationService: InvitationService, private BusinessService: 
BusinessService) { 
this.invitationId = 1; //prueba temporal con invitacion 1
this.getInvitations();
this.getInvitationById(this.invitationId);
  }

   ngOnInit() {

  }

  getInvitations() {
    this.InvitationService.getAllInvitation().subscribe(result => {
      this.invitationsList = result;
      console.log(result);
    }, error => {
      console.log(JSON.stringify(error));
    });
  }

  getInvitationById(invitationId:number){
    this.InvitationService.getInvitationById(invitationId).subscribe(result => {
      this.currentInvitation = result;
      console.log(result);
      //this.business=this.currentInvitation['business'];
       //console.log(this.currentInvitation['business']); 
     }, error => {
     console.log(JSON.stringify(error));
    });
  }
      ...

Đây là đánh dấu html của tôi:

<div class="container-fluid mt--7">
  <div class="row">
    <div class="container col-xl-10 col-lg-8">
      <div class="card card-stats ">
        <div class="card-body container-fluid form-check-inline" 
         *ngIf="currentInvitation">
          <div class="col-4">
             ...

Tôi hy vọng điều này có thể hữu ích.

Bạn đã thử chuyển [(ngModel)]sang divthay vì switchtrong HTML của mình chưa? Tôi đã gặp lỗi tương tự xuất hiện trong mã của mình và đó là do tôi đã ràng buộc mô hình thành a <mat-option>thay vì a <mat-select>. Mặc dù tôi không sử dụng điều khiển biểu mẫu.

Trong trường hợp của tôi, đó là một component.member không tồn tại, ví dụ:

[formControl]="personId"

Thêm nó vào khai báo lớp đã sửa nó

this.personId = new FormControl(...)

Trong trường hợp của tôi, lỗi được kích hoạt bằng cách sao chép nhập một thành phần trong mô-đun.

#Lý lịch

• NativeScript 6.0

Trong trường hợp của tôi, lỗi được kích hoạt bằng cách thay đổi thẻ phần tử từ do lỗi. Bên trong <TextView an [(ngModel)] = "name". được định nghĩa.

Sau khi loại bỏ lỗi [(ngModel)] = "name" đã biến mất.

trong trường hợp của tôi, tôi có một <TEXTAREA>thẻ từ html cũ trong khi chuyển đổi sang góc cạnh. Đã phải thay đổi thành <textarea>.