त्रुटि त्रुटि: स्विच पर अनिर्दिष्ट नाम विशेषता के साथ प्रपत्र नियंत्रण के लिए कोई मूल्य अभिगमकर्ता नहीं

Question 1

यहाँ मेरे कोणीय 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)

जब मैं तत्व स्विच को इनपुट में बदलता हूं तो यह काम करता है, यह जानकर कि मैं अन्य घटकों के लिए समान संरचना का उपयोग कर रहा हूं और यह ठीक काम करता है।

Question 2

मैंने इस त्रुटि को name="fieldName" ngDefaultControlविशेषता को उस तत्व में जोड़कर तय किया है जो विशेषता को वहन करता [(ngModel)]है।

Question 3

मुझे एक ही समस्या थी और मुद्दा यह था कि मेरे बच्चे के घटक का @inputनाम था formControl।

इसलिए मुझे अभी से बदलने की जरूरत है:

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

सेवा:

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

ts:

@Input()
control:FormControl;

Question 4

मुझे यह त्रुटि मिली है जबकि कोणीय 7. में एक कस्टम फॉर्म कंट्रोल कंपोनेंट लिखते हुए।

मेरे मामले में, @Componentडेकोरेटर में जोड़ने के लिए निम्नलिखित आवश्यक है :

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

यह एक मामला है "मुझे नहीं पता कि यह क्यों काम करता है, लेकिन यह करता है।" इसे एंगुलर के हिस्से पर खराब डिज़ाइन / कार्यान्वयन के लिए चाक करें।

Question 5

मेरे पास भी यही त्रुटि थी, कोणीय 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}}

Question 6

मेरे पास यही त्रुटि थी- मैंने गलती mat-form-fieldसे inputतत्व के बजाय [(ngModel)] को बांध दिया ।

Question 7

मुझे जैस्मीन के साथ अपने यूनिट परीक्षणों में यह त्रुटि संदेश मिल रहा था। मैंने कस्टम तत्व में ngDefaultControl विशेषता जोड़ी (मेरे मामले में यह एक कोणीय सामग्री स्लाइड टॉगल थी) और यह त्रुटि को हल करता है।

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

ऊपर तत्व बदले शामिल करने के लिए ngDefaultControl atttribute

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

Question 8

कर्मा यूनिट टेस्ट केस चलाते समय मुझे इस त्रुटि का सामना करना पड़ा था, आयात में MatSelectModule जोड़ना समस्या को हल करता है

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

Question 9

यह एक तरह से बेवकूफी है, लेकिन मुझे यह त्रुटि संदेश गलती से उपयोग [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: ''
    })
  }
}

Question 10

मेरे मामले में, मैंने इनपुट के बजाय लेबल पर [(ngModel)] डाला था। एक चेतावनी भी है, मैंने ऊपर निर्दिष्ट त्रुटि को सही ढंग से निर्दिष्ट पंक्ति में चलाने की कोशिश की, लेकिन त्रुटि नहीं होगी। यदि ऐसी अन्य जगहें हैं जहाँ आपने एक ही गलती की है, तब भी यह आपको उसी पंक्ति में वही त्रुटि फेंकता है

Question 11

मेरे मामले में मैंने निर्देश का इस्तेमाल किया था, लेकिन इसे अपने माड्यूल.टीएस फ़ाइल में आयात नहीं किया था। आयात इसे तय किया।

Question 12

मेरे पास यही त्रुटि थी, मेरे पास controlमेरे कस्टम फॉर्म घटक में एक इनपुट फ़ील्ड था , लेकिन नाम के इनपुट में गलती से नियंत्रण गुजर रहा था formControl। आशा है कि कोई भी इस मुद्दे का सामना नहीं करेगा।

Question 13

मेरे मामले में यह मेरी app.module.tsघोषणाओं में डीआई के लिए नए घटक को पंजीकृत करने के रूप में बहुत कम था, लेकिन निर्यात में नहीं ।

Question 14

मेरे मामले में, यह मेरे साझा मॉड्यूल में हो रहा है और मुझे @NgModule में निम्नलिखित जोड़ना होगा:

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

Question 15

मुझे यह त्रुटि तब भी हुई जब मैंने अपने एक घटक इनपुट का नाम 'formControl' रखा। संभवतः यह किसी और चीज़ के लिए आरक्षित है। यदि आप घटकों के बीच FormControl ऑब्जेक्ट को पास करना चाहते हैं, तो इसे इस तरह उपयोग करें:

@Input() control: FormControl;

इस तरह नहीं:

@Input() formControl: FormControl;

अजीब - लेकिन काम :)

Question 16

मेरे पास एक ही त्रुटि थी, लेकिन मेरे मामले में जाहिरा तौर पर यह एक तुल्यकालन मुद्दा था, घटकों को रेंडर करने के समय पर html।

मैंने इस पृष्ठ पर प्रस्तावित कुछ समाधानों का पालन किया लेकिन उनमें से किसी ने मेरे लिए काम किया, कम से कम पूरी तरह से नहीं।

क्या वास्तव में मेरी त्रुटि को हल किया गया था तत्वों के पिता HTML टैग के नीचे कोड स्निपेट लिखना था।

मैं चर के लिए बाध्य था।

कोड:

    *ngIf="variable-name"

त्रुटि का कारण था, जाहिरा तौर पर परियोजना को पृष्ठ रेंडर करने की कोशिश कर रहा है, जाहिरा तौर पर चर का मूल्यांकन करने के क्षण में, परियोजना सिर्फ कोई मान नहीं पा सकती है। उपरोक्त कोड स्निपेट के साथ आप यह सुनिश्चित करते हैं कि पृष्ठ को प्रस्तुत करने से पहले आप पूछें कि क्या चर को इनिशियलाइज़ किया जा रहा है।

यह मेरा कंपोनेंट है। कोड:

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

मुझे उम्मीद है कि यह मददगार हो सकता है।

Question 17

क्या आपने अपने HTML में इसके बजाय अपने [(ngModel)]को स्थानांतरित divकरने का प्रयास switchकिया है? मुझे अपने कोड में एक ही त्रुटि दिखाई दी थी और यह इसलिए था क्योंकि मैंने मॉडल को एक के <mat-option>बजाय बाध्य किया था <mat-select>। हालांकि मैं फॉर्म कंट्रोल का उपयोग नहीं कर रहा हूं।

Question 18

मेरे मामले में यह एक घटक था

[formControl]="personId"

इसे वर्ग घोषणा में जोड़कर इसे तय किया

this.personId = new FormControl(...)

Question 19

मेरे मामले में, मॉड्यूल में एक घटक के आयात को डुप्लिकेट करके त्रुटि को ट्रिगर किया गया था।

Question 20

#पृष्ठभूमि

नेटिवस्क्रिप्ट 6.0

मेरे मामले में, गलती से तत्व टैग को बदलकर त्रुटि को ट्रिगर किया गया था। अंदर <TextView एक [(ngModel)] = "नाम"। परिभाषित किया गया था।

हटाने के बाद [(ngModel)] = "नाम" त्रुटि चली गई थी।

Question 21

यूनिट परीक्षण चलाने के दौरान मैं इस मुद्दे का सामना कर रहा था। ठीक करने के लिए मैंने अपने spect.ts फ़ाइल में आयात में MatSlideToggleModule जोड़ा।

Question 22

मेरे मामले में, मुझे <TEXTAREA>कोणीय में परिवर्तित करते हुए पुराने html से टैग मिला था । में बदलना था <textarea>।

Question 23

यह त्रुटि तब होती है जब आप गैर-इनपुट तत्वों जैसे ड्रॉपडाउन या रेडियो बटन विकल्पों में ngModel को जोड़ने का प्रयास करते हैं। मेरे मामले में, मैंने आयन-चयन के बजाय आयन-चयन-विकल्प में एक ngModel जोड़ा है।