angular - মাদুর-ফর্ম-ফিল্ডে অবশ্যই একটি ম্যাটফর্মফিল্ড কন্ট্রোল থাকতে হবে




angular-material2 (10)

আমরা আমাদের কোম্পানিতে আমাদের নিজস্ব ফর্ম-ফিল্ড-উপাদান তৈরি করার চেষ্টা করছি। আমরা উপাদান ডিজাইনের উপাদানগুলি এগুলি মোড়ানোর চেষ্টা করছি:

ক্ষেত্র:

<mat-form-field>
  <ng-content></ng-content>
  <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
  <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
  <mat-error>This field is required</mat-error>
</mat-form-field>

পাঠ্যবাক্স:

<field hint="hint">
  <input matInput 
  [placeholder]="placeholder" 
  [value]="value"
  (change)="onChange($event)" 
  (keydown)="onKeydown($event)" 
  (keyup)="onKeyup($event)" 
  (keypress)="onKeypress($event)">
</field>

ব্যবহার:

<textbox value="test" hint="my hint"></textbox>

এর ফলস্বরূপ প্রায়:

<textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
   <field>
      <mat-form-field class="mat-input-container mat-form-field>
         <div class="mat-input-wrapper mat-form-field-wrapper">
            <div class="mat-input-flex mat-form-field-flex">
               <div class="mat-input-infix mat-form-field-infix">
                  <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
                  <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
               </div>
            </div>
            <div class="mat-input-underline mat-form-field-underline">
               <span class="mat-input-ripple mat-form-field-ripple"></span>
            </div>
            <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
         </div>
      </mat-form-field>
   </field>
</textbox>

তবে আমরা কনসোলে "মাদুর-ফর্ম-ফিল্ডে অবশ্যই একটি ম্যাটফর্মফিল্ড কন্ট্রোল থাকতে হবে" পাচ্ছি। আমি অনুমান করি যে এটি মাদুর-ফর্ম-ফিল্ডের সাথে সরাসরি করার জন্য একটি মাদুইপুট-ক্ষেত্র নেই। তবে এটি এতে অন্তর্ভুক্ত রয়েছে, এটি কেবল এনজি-কনটেন্ট প্রজেকশনটির সাথে রয়েছে।

এখানে একটি ব্লিটজ: https://stackblitz.com/edit/angular-xpvwzf


সমাধান 1

MatInputModule ভিতরে app.module.ts MatInputModule আমদানি করুন

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

@NgModule({
  imports: [
     // .......
     MatInputModule
     // .......
  ]
})
export class AppModule { }

সমাধান 2

matInput বানানগুলি পরীক্ষা করে দেখুন, এটি কেস-সংবেদনশীল sure

<input matInput type="text" />

MatRadioModule ম্যাটফর্মফিল্ডের অভ্যন্তরে কাজ করবে না। docs বলে

এই ত্রুটিটি ঘটে যখন আপনি নিজের ফর্ম ক্ষেত্রে কোনও ফর্ম ক্ষেত্র নিয়ন্ত্রণ যোগ করেন নি। যদি আপনার ফর্ম ক্ষেত্রে কোনও নেটিভ বা উপাদান থাকে তবে নিশ্চিত হয়ে নিন যে আপনি এটিতে MatInput নির্দেশিকা যুক্ত করেছেন এবং MatInputModule আমদানি করেছেন। ফর্ম ফিল্ড কন্ট্রোল হিসাবে কাজ করতে পারে এমন অন্যান্য উপাদানগুলির মধ্যে <মাদুর নির্বাচন>, <মাদুর-চিপ-তালিকা> এবং আপনার তৈরি করা কোনও কাস্টম ফর্ম ক্ষেত্র নিয়ন্ত্রণ অন্তর্ভুক্ত রয়েছে।


আপনার যদি মাদুর-ফর্ম-ফিল্ডের মধ্যে উপযুক্ত ইনপুট থাকে তবে এটিতে ngIf পারে। উদাহরণ:

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

আমার ক্ষেত্রে, mat-chip-list কেবলমাত্র তার ডেটা লোড হওয়ার পরে "প্রদর্শিত হবে" বলে মনে করা হচ্ছে। তবে, বৈধতা সম্পাদন করা হয় এবং mat-form-field সাথে অভিযোগ করে

মাদুর-ফর্ম-ফিল্ডে অবশ্যই ম্যাটফর্মফিল্ডকন্ট্রোল থাকতে হবে

এটি ঠিক করার জন্য, নিয়ন্ত্রণ অবশ্যই সেখানে থাকতে হবে, তাই আমি [hidden] ব্যবহার করেছি:

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

Mosta দ্বারা একটি বিকল্প সমাধান প্রস্তাব করা হয়েছে: mat-form-field জন্য * ngIf সরান:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

আপনি এই guide অনুসরণ করার চেষ্টা করতে পারেন এবং নিজের MatFormFieldControl প্রয়োগ / সরবরাহ করতে পারেন


আমার ক্ষেত্রে আমি এটি পরিবর্তন করেছি:

<mat-form-field>
  <input type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

এটি:

<mat-form-field>
  <input matInput type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

ইনপুট ট্যাগে ম্যাটআইনপুট নির্দেশিকা যুক্ত করা আমার জন্য এই ত্রুটিটি স্থির করেছিল।


আমার ক্ষেত্রে, "onChanges ()" এর জন্য আমার বন্ধ হওয়া প্রথম বন্ধনীর একটি ইনপুট উপাদানটিতে মিস হয়েছিল এবং সুতরাং ইনপুট উপাদানটি সম্ভবত দৃশ্যমানভাবে রেন্ডার হয়নি:

 <input mat-menu-item matInput type="text" [formControl]="myFormControl" (ngModelChange)="onChanged()> 

আমি ঘটনাক্রমে ইনপুট ক্ষেত্র থেকে ম্যাট ইনপুট নির্দেশিকাটি সরিয়েছি যা একই ত্রুটির কারণ হয়েছিল।

যেমন।

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

স্থির কোড

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

উপরের মূল কোড কাঠামো / কনফিগারেশনের সমস্ত উত্তর যদি আপনার সমস্যার সমাধান না করে তবে এখানে আরও একটি বিষয় যাচাই করা আছে: নিশ্চিত হয়ে নিন যে আপনি কোনওভাবেই আপনার <input> ট্যাগকে অকার্যকর করেননি।

উদাহরণস্বরূপ, আমি পেয়েছি একই mat-form-field must contain a MatFormFieldControl একটি আত্ম-সমাপনী স্ল্যাশ / পরে কোনও অ্যাট্রিবিউটর পরে required বৈশিষ্ট্য স্থাপন করার পরে mat-form-field must contain a MatFormFieldControl ত্রুটি বার্তা mat-form-field must contain a MatFormFieldControl , যা কার্যকরভাবে আমার <input/> অকার্যকর করেছে। অন্য কথায়, আমি এটি করেছি (ইনপুট ট্যাগ বৈশিষ্ট্যের শেষে দেখুন):

ভুল :

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>

ডান :

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>

আপনি যদি সেই ভুলটি করেন বা আপনার <input> কে অকার্যকর করতে অন্য কিছু করেন, তবে আপনি mat-form-field must contain a MatFormFieldControl ত্রুটি mat-form-field must contain a MatFormFieldControl । যাইহোক, আপনি ডিবাগিং হওয়ায় এটি দেখার জন্য আরও একটি জিনিস।


দুর্ভাগ্যক্রমে আমি ইতিমধ্যে কিছু ভাল উত্তর সম্পর্কে মন্তব্য করতে পারি না কারণ আমার কাছে এখনও এসও পয়েন্ট নেই, তবে, এখানে 3 টি মূল মডিউল রয়েছে যা আপনার উপাদানগুলির প্যারেন্ট মডিউলটিতে আপনি আমদানি করছেন তা নিশ্চিত করার প্রয়োজন হবে, কোনটি বাদ দিয়ে আপনাকে সরাসরি আপনার উপাদানগুলিতে আমদানি করতে হবে। আমি তাদের সংক্ষেপে ভাগ করে নিতে চাই এবং তারা কী করে তা হাইলাইট করতে চাই।

  1. MatInputModule
  2. MatFormFieldModule
  3. ReactiveFormsModule

প্রথম দুটি হ'ল কৌণিক পদার্থের জন্য। কৌণিক পদার্থে নতুন অনেক লোক সহজাতভাবে এগুলির মধ্যে একটির মধ্যে উপস্থিত হবে এবং বুঝতে পারবে না যে কোনও ফর্ম তৈরির জন্য উভয়ের প্রয়োজন।

তাহলে তাদের মধ্যে পার্থক্য কী?

ম্যাটফর্মফিল্ডমডিউল অ্যাংুলার ম্যাটারিয়াল উপলভ্য ফর্ম ক্ষেত্রগুলির বিভিন্ন ধরণের অন্তর্ভুক্ত। এটি সাধারণভাবে ফর্ম ক্ষেত্রগুলির জন্য একটি উচ্চ স্তরের মডিউল বেশি, অন্যদিকে MatInputModule বিশেষত 'ইনপুট' ক্ষেত্র প্রকারের জন্য, বাক্স, রেডিও বাটন নির্বাচন করার বিপরীতে রয়েছে as

উপরের তালিকার তৃতীয় আইটেমটি অ্যাংুলারের প্রতিক্রিয়াশীল ফর্মগুলির মডিউল। প্রতিক্রিয়াশীল ফর্মগুলির মডিউলটি এক টন হুড কৌনিক প্রেমের জন্য দায়ী। আপনি যদি কৌণিকের সাথে কাজ করতে যাচ্ছেন, আমি আপনাকে সুপারিশ করছি যে আপনি কৌণিক ডক্স পড়তে কিছুটা সময় ব্যয় করুন। তারা আপনার উত্তর আছে। বিল্ডিং অ্যাপ্লিকেশনগুলিতে খুব কমই ফর্মগুলি জড়িত না এবং আপনার অ্যাপ্লিকেশনটি প্রতিক্রিয়াশীল ফর্মগুলিকে জড়িত করে। এই কারণে, দয়া করে এই দুটি পৃষ্ঠা পড়ার জন্য সময় নিন।

কৌণিক ডক্স: প্রতিক্রিয়াশীল ফর্ম

কৌণিক ডক্স: প্রতিক্রিয়াশীল ফর্মগুলির মডিউল

প্রথম ডক 'প্রতিক্রিয়াশীল ফর্মগুলি' আপনি শুরু করার সাথে সাথে আপনার সবচেয়ে শক্তিশালী অস্ত্র হবেন, এবং কৌণিক প্রতিক্রিয়াশীল ফর্মগুলির আরও উন্নত অ্যাপ্লিকেশনগুলিতে যাওয়ার পরে দ্বিতীয় ডক আপনার সর্বাধিক পাওয়ার অস্ত্র হবে weapon

মনে রাখবেন, এগুলি আপনার উপাদানগুলির মডিউলটিতে সরাসরি আমদানি করা দরকার, আপনি যে উপাদানগুলিতে সেগুলি ব্যবহার করছেন তা নয়। কৌনিক 2 এ যদি আমি সঠিকভাবে মনে করি তবে আমরা আমাদের মূল অ্যাপ্লিকেশন মডিউলে অ্যাংুলার ম্যাটারিয়াল মডিউলগুলির পুরো সেটটি আমদানি করেছিলাম এবং তারপরে কী আমদানি করে? আমাদের সরাসরি আমাদের প্রতিটি উপাদানের প্রয়োজন। বর্তমান পদ্ধতিটি অনেক বেশি কার্যকর আইএমও কারণ আমরা কেবলমাত্র কয়েকটি ব্যবহার করি তবে কৌনিক উপাদান মডিউলগুলির পুরো সেটটি আমদানির গ্যারান্টিযুক্ত।

আমি আশা করি এটি কৌণিক পদার্থের সাহায্যে বিল্ডিং ফর্মগুলির জন্য আরও কিছুটা অন্তর্দৃষ্টি সরবরাহ করে।


দুর্ভাগ্যক্রমে মাদুর-ফর্মের ক্ষেত্রে সামগ্রী প্রজেকশনটি এখনও সমর্থিত নয়। এটি সম্পর্কে সর্বশেষতম খবর পেতে দয়া করে নীচের github.com/angular/material2/issues/9411 ট্র্যাক করুন।

এখন অবধি আপনার একমাত্র সমাধান হ'ল হয় আপনার বিষয়বস্তুটিকে সরাসরি মাদুর-ফর্ম-ফিল্ড উপাদানগুলিতে রাখুন বা একটি ম্যাটফর্মফিল্ডকন্ট্রোল শ্রেণি প্রয়োগ করুন যাতে একটি কাস্টম ফর্ম ফিল্ড উপাদান তৈরি করা যায়।