Question

我正在尝试使用Angular Material构建表单。该表格使客户能够修改其个人数据（带有输入字段）。在这种情况下，我使用的是“ mat-form-field”组件

但是还有一些他不能修改的字段（例如他的名字）。对于这种情况，我不知道要使用什么元素。我想要一些与Material Design兼容的东西，但是找不到。

这是我的代码：

<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

修改或不修改的可能性是一个字段属性，只有数据类型定义了需要使用的元素的选择。因此，在名字的示例中，正如您所说，该选择是输入文本，仅需要设置disable或readonly属性，就可以在以下选项中进行选择：

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

或者：

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

材料没有超出标准规定的任何特殊规定。当然，请将那些禁用/只读输入放在<mat-form-field>内以包装材料样式。

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

对于反应式表单，您必须像这样在组件中禁用名称formcontrol：

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

只是this.form.value.name不起作用。您必须使用this.form.getRawValue()来包含名称值。该名称不必以这种方式成为表单字段。您可以将其显示为字符串。

材质的角度形式

3 个答案: