187

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

ক্ষেত্র:

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

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

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

angular angular-material2

— ভিক্টর এরিকসন
সূত্র

3

আপনি কি কখনও সমস্যার সমাধান করেছেন? আমার ঠিক একই সমস্যা হচ্ছে উত্তরগুলি প্রাসঙ্গিক নয়।

— numsu

না, দুর্ভাগ্যবশত না :/. আমি এটি পেয়েছি: github.com/angular/matory2/issues/9411 এবং যদি আমি এটি সঠিকভাবে বুঝতে পারি তবে এটি এটি অসমর্থিত।

— ভিক্টর এরিকসন

ঠিক আছে .. ধন্যবাদ, আমি এমন একটি উপাদান তৈরি করেছি যা সমস্ত ইঙ্গিত এবং বৈধতাগুলিকে সজ্জিত করে এবং ইনপুট উপাদানটির আওতায় রাখে।

— numsu

টুইটার

— darksoulsong

1

আমি দুঃখিত তবে এটি কার্যকর ছিল না, আমার প্রশ্নের উত্তরটি খুব কমই আছে।

— ভিক্টর এরিকসন

27

দুর্ভাগ্যক্রমে মাদুর-ফর্মের ক্ষেত্রে সামগ্রী প্রজেকশনটি এখনও সমর্থিত নয়। এটি সম্পর্কে সর্বশেষতম খবর পেতে দয়া করে নীচের গিথুব ইস্যুটি ট্র্যাক করুন ।

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

— n.yakovenko
সূত্র

131

আমি একটি ত্রুটি বার্তা googling এই প্রশ্ন জুড়ে এসেছি। নিচে উত্তর , জানায় যে MatInputModuleচাহিদা আমদানি করতে আমার সমস্যার সমাধান। যেহেতু এটি গৃহীত উত্তর, আমি এখানে লিঙ্কটি যুক্ত করছি, আশা করছি এটি অন্যের সময় সাশ্রয় করবে।

— সিজিএফএক্স

3

আমার সমস্যাটি হ'ল আমি ' ফর্মসমডুল ' আমদানি করতে অবহেলা করেছি । আমি আশা করি এটা কারো সাহায্যে লাগবে.

— লেরেনা

@ সিজিএফএক্স আপনি একদম ঠিক ছেলে ম্যাটপুট মডেল আমদানি করা আমার সমস্যার সমাধান করেছে !!

— রফিক মোহাম্মদ 21

5

এছাড়াও একটি <mat-form-field>ট্যাগের মধ্যে আপনাকে অবশ্যই নিশ্চিত করতে হবে যে আপনি matInputপ্রতিটি inputট্যাগের জন্য সঠিকভাবে গুণাবলী যুক্ত করেছেন বা matNativeControl<select>

— প্রতিটিতে

1

@ সিজিএফএক্স আমি আশা করি তারা এই তথ্য এবং আরও ভাল উদাহরণ সহ ডকুমেন্টেশন আপডেট করবেন ...

409

আমার এই সমস্যা ছিল। আমি MatFormFieldModuleআমার মূল মডিউলটিতে আমদানি করেছি, তবে অ্যারেতে যুক্ত MatInputModuleকরতে ভুলে গেছি imports:

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

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

আশা করি এটা সাহায্য করবে.

আরও তথ্য এখানে ।

— darksoulsong
সূত্র

9

এছাড়াও একটি ভিতরে <mat-form-field>ট্যাগ আপনি কি নিশ্চিতরূপে করতে হবে আপনি সঠিকভাবে যোগ matInputপ্রত্যেক উপর অ্যাট্রিবিউট inputবা ট্যাগ বা matNativeControlযে উপর অ্যাট্রিবিউট <select>ট্যাগ

— svassr

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

— উইলিয়াম হাউ

1

গুরুত্বপূর্ণ: অর্ডার বিষয়!

— বেকারিও সিনিয়র

: আমার জন্য কাজ না করে, আমি শুধু এই উদাহরণে ব্যবহৃত material.angular.io/components/stepper/overview

— tatsu

এটি আমার পক্ষে কাজ করেছে import { MatInputModule } from '@angular/material/input':

— জারেড হুইপল

84

সমাধান 1 - MatInputModule আমদানি করুন

MatInputModuleমডিউল ভিতরে ইম্পোর্টapp.module.ts

কৌণিক 9+

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

কৌণিকের নীচে 9

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

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

সমাধান 2 - বানান ভুল

যোগ করতে ভুলবেন না matInputএবং এটি কেস-সংবেদনশীল।

<input matInput type="text" />

— ওয়াসিফ
সূত্র

2

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

— ভান

ইনপুট স্টেটমেন্টটি থেকে "matInput" অনুপস্থিত থাকাকালীন আমি এই সমস্যার মুখোমুখি হয়েছি।

— হাদিদআলি

16

অফিসিয়াল ডকুমেন্টেশন থেকে এখানে উদ্ধৃত :

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

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

— user158
সূত্র

13

এটাও যদি আপনি ঘটতে পারে একটি মাদুর-ফর্ম-ক্ষেত্র মধ্যে একটি সঠিক ইনপুট , কিন্তু এটা একটা হয়েছে ngIfএটা। উদাহরণ:

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

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

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

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

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

একটি বিকল্প সমাধান দ্বারা প্রস্তাব করা হয় Mosta: চলুন * এনজিআই এর জন্য mat-form-field:

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

— আলেক্সেই
সূত্র

আমার ঠিক একইরকম সমস্যা হয়েছিল, আপনি যা বলছেন তার অনুরূপ কিছু দিয়ে আমি এটি ঠিক করেছি। আপনি আমার upvote আছে!

— অ্যালেক্স

3

ধন্যবাদ, লুকানো ব্যবহারের পরিবর্তে আপনি পুরো মাদুর-ফর্ম-ফিল্ড ট্যাগে এনজিআই শর্তটি স্থানান্তর করতে পারেন

— মোস্তা

8

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



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})

— ইব আবায়মি আলি
সূত্র

3

স্ট্যাকওভারফ্লোতে স্বাগতম। প্রশ্নের উত্তর দেওয়ার সময়, দয়া করে আপনার কোড স্নিপেট কী করে এবং এটি কেন ওপি-র প্রশ্নের সমাধান করে তা নিয়ে কিছু ব্যাখ্যা যুক্ত করুন। আরও তথ্যের জন্য এখানে কীভাবে উত্তর দিন তা

— জেনসেন

5

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

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

"Matinput"

"MatInput"

— ReturnTable
সূত্র

হুম নিশ্চিত নয়, আপনি উত্পন্ন আউটপুট আটকিয়েছেন। সত্যিকারের কোডটিতে এটি ইতিমধ্যে matInput, যদি আপনি "পাঠ্যবক্স-বিভাগ" দেখেন। আমি যখন কেবল উপাদান ব্যবহার করি তখন এটি কাজ করতে আমার কোনও সমস্যা হয় না, প্রজেকশনটির সাথে আমার নিজের সামঞ্জস্য করার চেষ্টা করার পরে এটি কাজ করা বন্ধ করে দেয়। আমার উত্‍সাহকটি এটিএমের সমস্যা মনে হচ্ছে, আশা করি এটি দিনের বেলায় নিজেই ঠিক হয়ে যাবে।

— ভিক্টর এরিকসন

ওহ আমি দেখছি আমার খারাপ। এটি যাইহোক একটি দীর্ঘ শট ছিল। আমি আসলেই কেউ সঠিক পাতলা কোণ নিয়ে আসতে পারি কিনা তা দেখার জন্য আমি অনুসরণ করব, আমি এই বিষয়টি সম্পর্কে আগ্রহী।

— রিটার্টেবল

2

এটা আমার সাথে ঘটেছিল, আমি পরিবর্তন mdInputকরতে ভুলে গেছি matInput।

— ইব্রাহিম আলারাবী 15

2

কৌণিক 5: <ইনপুট> ট্যাগ বৈশিষ্ট্যের matInputপরিবর্তে হওয়া উচিত mat-input।

— স্ট্যাভম

5

বাসা বাঁধার চেষ্টা করার পরে যদি কেউ এই ত্রুটিটিতে আটকে যায় তবে <mat-checkbox>ভাল হোন! এটি কোনও <mat-form-field>ট্যাগের মধ্যে কাজ করে না ।

— মীনা
সূত্র

5

যদি কেউ নীচের মতো কোনও <mat-radio-group>অভ্যন্তরে বাসা বাঁধার চেষ্টা করে তবে আপনি <mat-form-field>এই ত্রুটিটি পেয়ে যাবেন

         <mat-form-field>
                <!-- <mat-label>Image Position</mat-label> -->
                <mat-radio-group aria-label="Image Position" [(ngModel)]="section.field_1">
                    <mat-radio-button value="left">Left</mat-radio-button>
                    <mat-radio-button value="right">Right</mat-radio-button>
                </mat-radio-group>
            </mat-form-field>

প্যারেন্ট <mat-form-field>ট্যাগগুলি সরান

— স্টিভ সোনিয়াস
সূত্র

আমার এই সমস্যাটি ছিল, এবং এই ধরণের জিনিসটির সাথে মার্কআপের একটি স্নিপেট ছিল। mat-form-fieldতৈরি করা সমস্যাটি সরানো আমার পক্ষে দূরে চলেছে।

— অ্যান্ড্রু গ্রে

এমন কোনও কারণ আছে যা এর <mat-form-field>অভ্যন্তরে রেডিও গ্রুপকে সমর্থন করে না? আমারও এই সমস্যাটি ছিল এবং আমি কেবল মাদুর ফর্ম ফিল্ড ট্যাগগুলি মুছে ফেলার চিন্তা করি নি কারণ এতগুলি উপকরণ ইউআই ফর্ম উদাহরণ ব্যবহার করার কারণে এটি করা উপযুক্ত জিনিস হবে বলে মনে হয় না <mat-form-field>। আমার কাছে ফর্মগুলির জন্য সমস্ত বিভিন্ন উপাদান ফর্ম ইনপুট মডিউল রয়েছে, ড্রপডাউনগুলি এবং রেডিও গ্রুপগুলি আমার অ্যাপ্লিকেশনটিতে সংজ্ঞায়িত করুন mod

— অ্যালেক্স

আমি বেলেভ করতে পারছি না .... আমি সবকিছু করার চেষ্টা করি এবং কিছুই করার মতো কিছু না .... এবং কয়েকদিন ব্যথার পরেও আমি এই সহজ সমাধানটি পেয়েছি ... ধন্যবাদ সাথী

— আটার

3

আমারও এই সমস্যাটি ছিল <mat-select>এবং আমার টেমপ্লেটে উপাদান রয়েছে, যখন আমি মডিউলটিতে ম্যাটসিলিটমোডুল আমদানি করি তখন এটি কাজ করে, এটি বিজ্ঞান তৈরি করে না, তবে দৃ hope় আশা এটি আপনাকে সহায়তা করতে পারে।

import { MatSelectModule } from '@angular/material/select';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule
],

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

— user9001817
সূত্র

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

— পিটারএস

2

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

MatInputModule
MatFormFieldModule
ReactiveFormsModule

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

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

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

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

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

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

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

মনে রাখবেন, এগুলি আপনার উপাদানগুলির মডিউলটিতে সরাসরি আমদানি করা দরকার, আপনি যে উপাদানগুলিতে সেগুলি ব্যবহার করছেন তা নয়। আমাদের সরাসরি আমাদের প্রতিটি উপাদানের প্রয়োজন। বর্তমান পদ্ধতিটি আরও কার্যকর আইএমও, কারণ আমরা কেবলমাত্র কয়েকটি ব্যবহার করি তবে কৌনিক উপাদান মডিউলগুলির পুরো সেটটি আমদানির গ্যারান্টিযুক্ত।

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

— anothercoder
সূত্র

2

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

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

— cjn
সূত্র

2

আমার ক্ষেত্রে আমার ক্ষেত্রে একমাত্র উপাদান হিসাবে ফিল্ড থেকে একটি মাদুরের মধ্যে মাদুর স্লাইড থাকলে একই ত্রুটি ঘটতে পারে

 <mat-form-field>
    <mat-slide-toggle [(ngModel)]="myvar">
       Some Text
     </mat-slide-toggle>
 </mat-form-field>

<mat-form-field> সরল সমাধানের মধ্যে স্লাইডটি টগলকে রুটে স্থানান্তরিত করাতে যদি আপনার বেশ কয়েকটি বৈশিষ্ট্য থাকে তবে এটি ঘটতে পারে

— Kisinga
সূত্র

1

এটি আমার জীবন বাঁচিয়েছিল। ধন্যবাদ।

— পাওলো পেদ্রোসো

1

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

— rivanov
সূত্র

1

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

যেমন।

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

— ফ্র্যাংকলিন ধার্মিক
সূত্র

1

MatRadioModule ম্যাটফর্মফিল্ডের মধ্যে কাজ করবে না। ডক্স বলে

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

— intotecho
সূত্র

1

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

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

— জাভা addict301
সূত্র

1

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

স্ট্যাকব্লিটজে পুরো উদাহরণ দেখুন ।

আমি ভিতরে FormControl( প্রতিক্রিয়াশীল ফর্ম ) ব্যবহার করেছি CustomInputComponentতবে FormGroupবা FormArrayআপনার আরও জটিল ফর্ম উপাদানগুলির প্রয়োজন হলে খুব বেশি কাজ করা উচিত।

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <mat-form-field appearance="outline" floatLabel="always" color="primary">
    <mat-label>First name</mat-label>
    <input matInput placeholder="First name" formControlName="firstName" required>
    <mat-hint>Fill in first name.</mat-hint>
    <mat-error *ngIf="firstNameControl.invalid && (firstNameControl.dirty || firstNameControl.touched)">
      <span *ngIf="firstNameControl.hasError('required')">
        You must fill in the first name.
      </span>
    </mat-error>
  </mat-form-field>

  <custom-input
    formControlName="lastName"
    [errorMessages]="errorMessagesForCustomInput"
    [hint]="'Fill in last name.'"
    [label]="'Last name'"
    [isRequired]="true"
    [placeholder]="'Last name'"
    [validators]="validatorsForCustomInput">
  </custom-input>

  <button mat-flat-button
    color="primary"
    type="submit"
    [disabled]="form.invalid || form.pending">
    Submit
  </button>

</form>

কাস্টম input.component.html

<mat-form-field appearance="outline" floatLabel="always" color="primary">
  <mat-label>{{ label }}</mat-label>

  <input
    matInput
    [placeholder]="placeholder"
    [required]="isRequired"
    [formControl]="customControl"
    (blur)="onTouched()"
    (input)="onChange($event.target.value)">
  <mat-hint>{{ hint }}</mat-hint>

  <mat-error *ngIf="customControl.invalid && (customControl.dirty || customControl.touched)">
    <ng-container *ngFor="let error of errorMessages">
    <span *ngFor="let item of error | keyvalue">
      <span *ngIf="customControl.hasError(item.key)">
        {{ item.value }}
      </span>
    </span>
    </ng-container>
  </mat-error>
</mat-form-field>

— csg
সূত্র

1

আপনি matInput আপনার ইনপুট ট্যাগের নির্দেশিকা হারিয়েছেন ।

— আইজাক পিটওয়া
সূত্র

1

আপনার app.module.ts ফাইলে আপনার MatInputModule আমদানি করতে হবে

'@ কৌণিক / উপাদান' থেকে import MatInputModule import আমদানি করুন;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CustomerPage } from './components/customer/customer';
import { CustomerDetailsPage } from "./components/customer-details/customer-details";
import { CustomerManagementPageRoutingModule } from './customer-management-routing.module';
import { MatAutocompleteModule } from '@angular/material/autocomplete'
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CustomerManagementPageRoutingModule,
    MatAutocompleteModule,
    MatInputModule,
    ReactiveFormsModule,
    MatFormFieldModule
  ],

— শাশ্বত গুপ্ত
সূত্র

1

আপনি আপনার মাদুর-ফর্ম-ফিল্ড ট্যাগের ভিতরে উপস্থিতি = "ফিল" সেট করতে পারেন, এটি আমার পক্ষে কাজ করে

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Username Or Email</mat-label>
    <input matInput placeholder="Username Or Email" type="text">
  </mat-form-field>

  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Password</mat-label>
    <input matInput placeholder="Password" type="password">
  </mat-form-field>
</form>

— পবন সিঙ্গারে
সূত্র

এটি আমার সমস্যাটি স্থির করেছে। আপনি কি দয়া করে appearence = "fill"এখানে কী করছেন তা ব্যাখ্যা করতে পারেন

— আইয়ামগ্রুট

1

কৌণিক 9+ ... উপাদান 9+

আমি লক্ষ্য করেছি যে তিনটি ভুল একই ত্রুটির জন্ম দিতে পারে:

নিশ্চিত করুন যে আপনি অ্যাপ.মডিউলে বা মডিউল.টায় আপনার ম্যাটফর্মফিল্ডমডিউল এবং ম্যাটআইনপুট মডেল আমদানি করেছেন যেখানে আপনার উপাদানগুলি আমদানি করা হচ্ছে (নেস্টেড মডিউলগুলির ক্ষেত্রে)
আপনি যখন মাদুর-ফর্ম-ফিল্ডে ম্যাটেরিয়াল বোতাম বা চেকবক্স মোড়বেন। মাদুর-ফর্ম-ফিল্ড মাদুর-ফর্ম-ফিল্ডের সাথে মোড়ানো হতে পারে এমন উপাদানগুলির তালিকা দেখুন
আপনি যখন আপনার ট্যাগে ম্যাট ইনপুট অন্তর্ভুক্ত করতে ব্যর্থ হন। যেমন <ইনপুট ম্যাটপুট টাইপ = "সংখ্যা" পদক্ষেপ = "0.01" ফর্মটি নিয়ন্ত্রণ নাম = "দাম" />

— 7guyo
সূত্র

0

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

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

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

— Gilmourguru
সূত্র

0

আপনি ম্যাটিনপুটমডিউল আমদানি করতে মিস করেছেন

— প্রাণিথ বাগগান
সূত্র

0

দ্রষ্টব্য কিছু সময় ত্রুটি দেখা দেয়, যখন আমরা সাবমিট বাটনটির চারপাশে "মাদুর-ফর্ম-ফিল্ড" ট্যাগটি ব্যবহার করি:

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

সাবধানতার সাথে এই বোতামটি জমা দেওয়ার বোতামের চারপাশে ব্যবহার করবেন না

— এম আবদুল্লাহ
সূত্র

0

घटक.ts ফাইলটিতে সরবরাহকারী ব্যবহার করুন

@Component({
 selector: 'your-selector',
 templateUrl: 'template.html',
 styleUrls: ['style.css'],
 providers: [
 { provide: MatFormFieldControl, useExisting: FormFieldCustomControlExample }   
]
})

— Bimzee
সূত্র

0

নতুন আপডেট করা ম্যাটিনপুট মডিউল আমদানি হ'ল:

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

কৌণিক পদার্থের API হিসাবে

— SaiSurya
সূত্র

-1

আমার একই সমস্যা ছিল

ইস্যু সহজ

শুধুমাত্র আপনাকে অবশ্যই আপনার প্রকল্পে দুটি মডিউল আমদানি করতে হবে

ম্যাটফর্মফিল্ডমডিউল ম্যাট ইনপুটমডুল

— ফাতিহ ıakıroğlu
সূত্র

-1

নিম্নরূপে মন্তব্য করা উপাদানের কারণে আমি একই সমস্যা পেয়েছি।

<mat-form-field>
    <mat-label>Database</mat-label>
    <!-- <mat-select>
        <mat-option *ngFor="let q of queries" [value]="q.id">
            {{q.name}}
        </mat-option>
    </mat-select>  -->
</mat-form-field>

ফর্ম ক্ষেত্রের উপাদান থাকা উচিত! (যেমন ইনপুট, টেক্সারিয়া, নির্বাচন করুন)

— ইউ_আর_উভেন ইউআর_উভিন
সূত্র