有棱角的形状和材料

Question

我正试图用有棱角的材料做一个形状。此表单允许客户修改其个人数据（带有输入字段）。对于这种情况，我使用“mat form field”组件

但是也有一些字段他不能修改（比如他的名字）。对于这种情况，我不知道使用什么元素。我想要一些与材料设计兼容的，但我找不到。

这是我的密码：

<form [formGroup]="form" (ngSubmit)="onSubmit()" fxLayout="column"fxLayoutAlign="center center">

    <mat-form-field>
        <label for="">First Name :</label> // THIS THE PART THAT CAUSES PROBLEM
        <span matInput>Peter</span>
    </mat-form-field>

    <mat-form-field>
      <input type="email" matInput placeholder="your email" formControlName="email" >
   </mat-form-field>

    <button mat-raised-button type="submit">Submit</button>
  </form>

有什么好主意吗？

谢啦

Answer 1

对于反应性表单，您必须在组件中禁用名称formControl，如下所示：

this.form = this.fb.group({name:[{value:'nameValue',disabled:true}]})

就是那个这个。类型价值name不起作用。你必须使用这个。类型getRawValue（），以使其包含名称值。以这种方式，名称不必是表单字段。您可以将其显示为字符串。

Answer 2

我的身体看起来有点不一样。我看不出你的直接问题，但我怀疑问题在于你有两个表单字段而不是一个。你可以在我的Mat Table Stackblitz上玩这个：Mat Table Stackbliz

那里有很多有用的东西。

      <li>
        <label class="label-pad">First name: </label>
        <mat-form-field class="inputBackground">
          <input matInput #firstName maxlength="30" class="inputField" type="text" id="first_name"
                 formControlName="first_name" [errorStateMatcher]="matcher" required>
          <mat-hint align="end">{{firstName.value?.length || 0}}/30</mat-hint>
          <mat-error>{{ errors.required }}</mat-error>
        </mat-form-field>
      </li>

Answer 3

修改或不修改的可能性它是一个字段属性，只有数据类型定义了您需要使用的元素的选择。所以，在名字的例子中，选择，如你所说，是一个输入文本，只需要设置禁用或只读属性，你可以在这些选项中选择：

<input type="text" disabled="disabled" />

或：

<input type="text" readonly="readonly" />

“材料”并没有定义任何超出标准的残疾特殊事物。当然，将这些禁用/只读输入放在