Question

link referring the error with textbox above the floating line 我是mat-form-field的新手。我试图通过使用mat-form-field对我的表单进行测试来探索它。使用mat库时，出现文本框边框。这很不寻常

我尝试使用mat-form-field，然后输入标签，但仍然出现边框

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

我不应该出现文本框，它变成一个边框。

我期望这样的东西：https://stackblitz.com/angular/mnrjgnnqmqv?file=app%2Fform-field-overview-example.ts

我的Css文件如下：

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

Answer 1

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

Answer 2

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

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

我如何正确使用mat-form-field获取输入值（已更新）

2 个答案: