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

Question

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

标签： angularangular-reactive-forms

Answer 1

如果您找不到覆盖您输入的 css，请添加此 css

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