CODEWITHSUNDEEP
angularangular-reactive-forms
krishna ram
krishna ram

Reputation: 105

How can i correctly use mat-form-field to get the input values (UPDATED)

link referring the error with textbox above the floating line I'm new to mat-form-fields. im trying to explore it by using mat-form-field to my form as a test. I'm getting a text box border when using the mat library. which is unusual

i tried using mat-form-field followed by input tag and i still get the border coming up 

<div fxFlex="120px">
     <label class="studentName">Student Name</label><sup class="red- 
             color">*</sup>
</div>
        <!--<div fxFlex="calc(100% - 135px)" fxLayout="column" >-->
<mat-form-field class="fullWidth">
      <input matInput formControlName="studentName"
             id="studentName"
             name="studentName"
             required>
            <!--<app-error-message [control]="form.controls.studentName"></app-error-message>-->
 </mat-form-field>

i shouldn't get the text box coming up, which turns to be a border .

I'm expecting something like this : https://stackblitz.com/angular/mnrjgnnqmqv?file=app%2Fform-field-overview-example.ts

My Css file follows:

.alignment .mat-form-field-outline-start,
.alignment .mat-form-field-outline-end {
  border-radius: 0px !important;
}

Upvotes: 0

Views: 1880

Answers (2)

HUSSAIN
HUSSAIN

Reputation: 640

if you couldn't find the css which is overriding your input add this css

mat-form-field.mat-form-field input {
    border: none !important;
}

Upvotes: 1

Syed Kashif
Syed Kashif

Reputation: 422

<mat-form-field class="fullWidth">
    <input matInput placeholder="Student Name" [(ngModel)]='variableName' required>
</mat-form-field>

Upvotes: 0

Related Questions