ข้อผิดพลาดข้อผิดพลาด: ไม่มีตัวเข้าถึงค่าสำหรับการควบคุมฟอร์มที่มีแอตทริบิวต์ชื่อที่ไม่ระบุบนสวิตช์

นี่คือส่วนประกอบของฉันใน 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>
    `
} )

นี่คือชั้นเรียนของฉัน:

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

นี่คือข้อผิดพลาดที่ฉันได้รับเมื่อรวบรวม:

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)

เมื่อฉันเปลี่ยนสวิตช์องค์ประกอบเป็นอินพุตมันใช้งานได้โดยรู้ว่าฉันใช้โครงสร้างเดียวกันกับส่วนประกอบอื่น ๆ และทำงานได้ดี

ฉันแก้ไขข้อผิดพลาดนี้โดยการเพิ่มname="fieldName" ngDefaultControlแอตทริบิวต์ให้กับองค์ประกอบที่มี[(ngModel)]แอตทริบิวต์

ฉันมีปัญหาเดียวกันและปัญหาคือการที่องค์ประกอบลูกของฉันมีชื่อ@inputformControl

ดังนั้นฉันแค่ต้องเปลี่ยนจาก:

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

ถึง:

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

ts:

@Input()
control:FormControl;

ฉันยังได้รับข้อผิดพลาดนี้ขณะเขียนส่วนประกอบการควบคุมฟอร์มแบบกำหนดเองใน Angular 7 อย่างไรก็ตามไม่มีคำตอบใดที่ใช้ได้กับ Angular 7

ในกรณีของฉันจำเป็นต้องเพิ่มสิ่งต่อไปนี้ให้กับ@Componentมัณฑนากร:

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

นี่เป็นกรณีของ "ฉันไม่รู้ว่าทำไมมันถึงได้ผล แต่มันทำได้" ชอล์กขึ้นเพื่อการออกแบบ / การใช้งานที่ไม่ดีในส่วนของ Angular

ฉันก็มีข้อผิดพลาดเหมือนกันเชิงมุม 7

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

ฉันเพิ่งเพิ่ม ngDefaultControl

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

ฉันมีข้อผิดพลาดเดียวกันนี้ - ฉันบังเอิญผูก [(ngModel)] กับของฉันmat-form-fieldแทนที่จะเป็นinputองค์ประกอบ

ฉันได้รับข้อความแสดงข้อผิดพลาดนี้ในการทดสอบหน่วยของฉันกับจัสมิน ฉันเพิ่มแอตทริบิวต์ngDefaultControlให้กับองค์ประกอบที่กำหนดเอง (ในกรณีของฉันคือการสลับสไลด์วัสดุเชิงมุม) และสิ่งนี้จะแก้ไขข้อผิดพลาด

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

เปลี่ยนองค์ประกอบด้านบนเพื่อรวมแอตทริบิวต์ ngDefaultControl

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

ในกรณีของฉันฉันได้ใส่ [(ngModel)] บนฉลากแทนการป้อนข้อมูล นอกจากนี้ยังมีข้อแม้ฉันพยายามเรียกใช้หลังจากข้อผิดพลาดข้างต้นในบรรทัดที่ระบุอย่างถูกต้อง แต่ข้อผิดพลาดจะไม่ไป หากมีสถานที่อื่นที่คุณทำผิดแบบเดียวกันก็ยังแสดงข้อผิดพลาดเดียวกันให้คุณในบรรทัดเดียวกัน

ฉันพบข้อผิดพลาดนี้ขณะเรียกใช้กรณีการทดสอบ Karma Unit กำลังเพิ่ม MatSelectModuleในการนำเข้าช่วยแก้ไขปัญหา

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

นี่เป็นเรื่องโง่ แต่ฉันได้รับข้อความแสดงข้อผิดพลาดนี้โดยบังเอิญใช้[formControl]แทน[formGroup] . ดูที่นี่:

ไม่ถูกต้อง

@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: ''
    })
  }
}

ขวา

@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: ''
    })
  }
}

ในกรณีของฉันฉันใช้คำสั่ง แต่ไม่ได้นำเข้าในไฟล์ module.ts ของฉัน นำเข้าแก้ไขแล้ว

ผมมีข้อผิดพลาดเดียวกันนี้ผมมีช่องใส่ที่มีชื่อcontrolในการกำหนดเองของฉันตัวแทนแบบฟอร์ม formControlแต่บังเอิญผ่านการควบคุมในการป้อนข้อมูลชื่อ หวังว่าจะไม่มีใครเผชิญกับปัญหานั้น

ในกรณีของฉันมันโง่พอ ๆ กับการลงทะเบียนส่วนประกอบใหม่สำหรับ DI ในไฟล์ app.module.tsการประกาศแต่ไม่ใช่ในการส่งออก

ในกรณีของฉันมันเกิดขึ้นในโมดูลที่แชร์ของฉันและฉันต้องเพิ่มสิ่งต่อไปนี้ลงใน @NgModule:

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

ใช้เวลาหลายชั่วโมงในการทำงาน หวังว่านี่จะช่วยคนอื่น ๆ ที่ดิ้นรนกับข้อผิดพลาดดังกล่าว

ฉันมีข้อผิดพลาดเดียวกัน แต่ในกรณีของฉันเห็นได้ชัดว่ามันเป็นปัญหาการซิงโครไนซ์ในขณะที่แสดง html คอมโพเนนต์

ฉันทำตามวิธีแก้ปัญหาบางอย่างที่เสนอในหน้านี้ แต่วิธีใดก็ตามที่ได้ผลสำหรับฉันอย่างน้อยก็ไม่สมบูรณ์

สิ่งที่ช่วยแก้ข้อผิดพลาดของฉันได้จริงคือการเขียนข้อมูลโค้ดด้านล่างภายในแท็ก html พ่อขององค์ประกอบ

ฉันผูกพันกับตัวแปร

รหัส:

    *ngIf="variable-name"

ข้อผิดพลาดเกิดจากโครงการพยายามแสดงผลหน้าเว็บซึ่งเห็นได้ชัดว่าในขณะประเมินตัวแปรโครงการไม่สามารถหาค่าได้ ด้วยข้อมูลโค้ดด้านบนคุณต้องแน่ใจก่อนที่จะแสดงผลหน้าเว็บคุณถามว่าตัวแปรได้รับการเตรียมใช้งานหรือไม่

นี่คือรหัส component.ts ของฉัน:

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

นี่คือมาร์กอัป html ของฉัน:

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

ฉันหวังว่านี่จะเป็นประโยชน์

คุณได้ลองย้าย[(ngModel)]ไปที่divแทนที่จะเป็นswitchHTML ของคุณหรือไม่? ฉันมีข้อผิดพลาดเดียวกันปรากฏในรหัสของฉันและเป็นเพราะฉันผูกโมเดลกับ a <mat-option>แทนที่จะเป็น<mat-select>ไฟล์. แม้ว่าฉันไม่ได้ใช้การควบคุมแบบฟอร์ม

ในกรณีของฉันมันเป็นส่วนประกอบสมาชิกซึ่งไม่มีอยู่เช่น

[formControl]="personId"

การเพิ่มลงในการประกาศคลาสได้รับการแก้ไข

this.personId = new FormControl(...)

ในกรณีของฉันข้อผิดพลาดเกิดจากการทำซ้ำการนำเข้าส่วนประกอบในโมดูล

#พื้นหลัง

• NativeScript 6.0

ในกรณีของฉันข้อผิดพลาดเกิดจากการเปลี่ยนแท็กองค์ประกอบจากเป็นโดยข้อผิดพลาด ภายใน <TextView an [(ngModel)] = "name" ถูกกำหนด

หลังจากลบ [(ngModel)] = "name" error หายไป

ในกรณีของฉันฉันมี<TEXTAREA>แท็กจาก html เก่าในขณะที่แปลงเป็นเชิงมุม ต้องเปลี่ยนเป็น<textarea>.