ত্রুটি ত্রুটি: স্যুইচে অনির্ধারিত নামের বৈশিষ্ট্য সহ ফর্ম নিয়ন্ত্রণের জন্য কোনও মান অ্যাক্সেসর

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. এ একটি কাস্টম ফর্ম নিয়ন্ত্রণ উপাদান লিখতে গিয়ে এই ত্রুটিটি পেয়েছি However তবে, উত্তরগুলির কোনওটিই কৌণিক to এর ক্ষেত্রে প্রযোজ্য নয়।

আমার ক্ষেত্রে, নিম্নলিখিতটি ডেকরেটারে যুক্ত করা দরকার @Component:

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

এটি "এটি কেন কাজ করে তা আমি জানি না তবে এটি কাজ করে" এর একটি ঘটনা is এটি কৌণিক দিক থেকে খারাপ নকশা / প্রয়োগের দিকে চালিত করুন।

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>

আমি সবেমাত্র এনজিডিফল্টকন্ট্রোল যুক্ত করেছি

   <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।

Question 7

আমি জেসমিনের সাথে আমার ইউনিট পরীক্ষায় এই ত্রুটি বার্তাটি পেয়েছিলাম। আমি কাস্টম উপাদানটিতে এনজিডিফল্টকন্ট্রোল বৈশিষ্ট্য যুক্ত করেছি (আমার ক্ষেত্রে এটি একটি কৌণিক উপাদান স্লাইড টগল ছিল) এবং এটি ত্রুটির সমাধান করে।

<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

আমার ক্ষেত্রে, আমি ইনপুট না করে লেবেলে [(ngModel)] প্রবেশ করিয়েছি। একটি সতর্কতাও রয়েছে, আমি নির্দিষ্ট লাইনে উপরের ত্রুটিটি সঠিকভাবে চালানোর চেষ্টা করেছি তবে ত্রুটিটি যায় নি। যদি অন্য কোনও জায়গাগুলি থেকে থাকে যেখানে আপনি একই ভুল করেছেন, তবে এটি আপনাকে একই লাইনে একই ত্রুটি ছুড়ে ফেলে

Question 9

আমদানিগুলিতে ম্যাটস্লেক্টমডুল যুক্ত করে কারমা ইউনিট পরীক্ষার কেসগুলি চালানোর সময় আমি এই ত্রুটির মুখোমুখি হয়েছি issue

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

Question 10

এটি একধরণের বোকা, তবে দুর্ঘটনাক্রমে [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 11

আমার ক্ষেত্রে আমি নির্দেশনা ব্যবহার করেছি, তবে এটি আমার মডিউল.টি ফাইলগুলিতে আমদানি করিনি। আমদানি এটি স্থির করে।

Question 12

আমার এই একই ত্রুটিটি ছিল, controlআমার কাস্টম ফর্ম উপাদানটিতে আমার একটি ইনপুট ক্ষেত্র ছিল তবে দুর্ঘটনাক্রমে নামটির ইনপুটটিতে নিয়ন্ত্রণ পাস করছিলাম formControl। আশা করি কেউই এই সমস্যার মুখোমুখি নয়।

Question 13

আমার ক্ষেত্রে এটা আমার মধ্যে দ্বি জন্য নতুন উপাদান নিবন্ধিত থাকার যেমন হাবা হিসেবে app.module.tsঘোষণা কিন্তু না রপ্তানির হবে।

Question 14

আমার ক্ষেত্রে এটি আমার ভাগ করা মডিউলে ঘটছে এবং আমাকে নিম্নলিখিতগুলি @ এনজিউমুলেলে যুক্ত করতে হয়েছিল:

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

এটি কাজ করতে অনেক ঘন্টা ব্যয় করেছে। আশা করি এটি এ জাতীয় ত্রুটির সাথে লড়াই করা কিছু অন্যকে সহায়তা করবে।

Question 15

আমার একই ত্রুটি ছিল, তবে আমার ক্ষেত্রে দৃশ্যত এটি একটি সিঙ্ক্রোনাইজেশন সমস্যা ছিল, এইচটিএমএল উপাদানগুলি সরবরাহ করার মুহুর্তে।

আমি এই পৃষ্ঠায় প্রস্তাবিত কয়েকটি সমাধান অনুসরণ করেছি তবে তাদের মধ্যে যে কোনও আমার পক্ষে কাজ করেছে, কমপক্ষে সম্পূর্ণ নয়।

আসলে আমার ত্রুটিটি যা সমাধান করেছিল তা হল উপাদানগুলির পিতা এইচটিএমএল ট্যাগের মধ্যে নীচের কোড স্নিপেট লিখতে।

আমি ভেরিয়েবলের সাথে আবদ্ধ ছিলাম।

কোড:

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

এখানে আমার এইচটিএমএল মার্কআপ:

<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 16

আপনি আপনার চলন্ত চেষ্টা করেছেন [(ngModel)]করতে divপরিবর্তে switchআপনার HTML কি? আমার কোডে আমারও একই ত্রুটি উপস্থিত হয়েছিল এবং এটি ছিল কারণ আমি মডেলটির <mat-option>পরিবর্তে একটি এ আবদ্ধ করি <mat-select>। যদিও আমি ফর্ম নিয়ন্ত্রণ ব্যবহার করছি না।

Question 17

আমার ক্ষেত্রে এটি একটি উপাদান ছিল me স্মৃতি যা বিদ্যমান ছিল না যেমন

[formControl]="personId"

শ্রেণি ঘোষণায় এটি যুক্ত করা এটি স্থির করে

this.personId = new FormControl(...)

Question 18

আমার ক্ষেত্রে, ত্রুটিটি মডিউলটিতে কোনও উপাদানটির আমদানির নকল করে ট্রিগার করা হয়েছিল।

Question 19

# ব্যাকগ্রাউন্ড

নেটিভস্ক্রিপ্ট .0.০

আমার ক্ষেত্রে, ত্রুটিটি ত্রুটি দ্বারা উপাদান ট্যাগ পরিবর্তন করে ট্রিগার করা হয়েছিল। <টেক্সটভিউ an [(ngModel)] = "নাম" এর ভিতরে। সংজ্ঞায়িত ছিল।

[(NgModel) সরানোর পরে] = "নাম" ত্রুটি চলে গেছে।

Question 20

আমার ক্ষেত্রে, <TEXTAREA>কৌণিক রূপান্তর করার সময় আমার কাছে পুরানো এইচটিএমএল থেকে একটি ট্যাগ ছিল । পরিবর্তন করতে হয়েছিল <textarea>।