如何使 formControl 只读

Question

如何以角度只读方式制作 formControl

我知道我可以在 html 中做到这一点

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

如何从 JS 代码而不是 html 中做到这一点，即以模型驱动的方式

Answer 1

如果您使用的是响应式表单，您可以像在 下面的示例代码（电子邮件字段）

    this.registerForm = this.formBuilder.group({
          first_name: ['', Validators.required],
          last_name: ['', Validators.required],
          email: new FormControl({value: null, disabled: true}, Validators.required),
          password: ['', Validators.compose([Validators.required, Validators.email])],
          confirm_password: ['', Validators.required],
    });

如果您想获取所有值，包括您应该使用的禁用控件：

    this.registerForm.getRawValue();

查看源码的方法注释

    /**
       * The aggregate value of the `FormGroup`, including any disabled controls.
       *
       * If you'd like to include all values regardless of disabled status, use this method.
       * Otherwise, the `value` property is the best way to get the value of the group.
       */
      getRawValue(): any;

享受编码！

Answer 2

在我的猜测中，READONLY 在响应式表单（Angular 2+）中是没有用的。

在普通的基于 HTML、CSS 的项目中

我们使用 READONLY 属性来防止用户键入/选择 表单控件，但我们从输入中获取值。

我们使用 DISABLED 属性来防止用户输入/选择 表单控件，我们没有从输入中获取值。

在基于 Angular 2+ CLI 的项目中

我们不需要 READONLY 属性来阻止用户输入/选择。 因为 DISABLED 属性足以阻止用户输入/选择，而且你 可以从禁用的输入/选择/复选框/单选字段中获取值。

您可以通过模型驱动的方式为字段添加禁用属性

创建 FormGroup 时

this.formGroupName = this.fb.group({
    xyz: [{ value: '', disabled: true }, Validators.required]
});

在运行时

this.formGroupName.get('xyz').disable({ onlySelf: true });

从 FormGroup 中获取值（已编辑）

仅从未禁用的字段中获取值

this.formGroupName.value;

获取FormGroup中所有字段的值

this.formGroupName.getRawValue();

所以在这里你不需要 READONLY 属性。 希望对您有所帮助。

Answer 3

我们可以使用任何 html 属性并使用 [] 将其绑定到角度。

因此，您可以在该控件中为属性readonly 使用属性绑定

例如

<input type="text" formControlName="xyz" [readonly]="anyBooleanPropertyFromComponent" />

Answer 4

对于reactive-forms，如果您想将字段设为只读，一种方法是使用普通的旧javascript，使用：

(document.getElementById('abc') as HTMLInputElement).setAttribute('readonly','true');

除此之外，您还可以将代码转换为更多的打字稿和角度方式。使用@ViewChild 访问元素，然后将readonly 属性设置为true：

HTML

<input [formControl]='data' id='abc' #element [readonly]="data.disabled"/>

TS

@ViewChild('element',{static:true, read: ElementRef}) element : ElementRef ;
(this.element.nativeElement as HTMLInputElement).readOnly = true;

但是，您需要在修改只读属性之前检查 formControl 的状态。

Answer 5

更新

将表单控件设置为disabled

control = new FormControl({ value: '', disabled: true })

以编程方式enable / disable formcontrol

<button (click)="enable()">Enable</button>
<button (click)="disable()">Disable</button>

disable() {
   this.control.disable()
}

enable() {
   this.control.enable()
}

Answer 6

如果使用表单构建器，使用响应式表单：

this.customerForm = this.formBuilder.group({
      customerName: [{value: null, disabled: true}, Validators.required],
})

Answer 7

一个简单的解决方案是将表单控件设置为未禁用：

this._formBuilder.group({
            some: new FormControl(
              {
                value: parseInt(this.myobject.subObject.stringMember),
                disabled: false
              },
              Validators.required
            ),

同时，将<input> 和/或<textarea> 设置为只读：

• 文本区域：

  <label>
    <span class="label">SomeLabel</span>
    <textarea
      maxlength="500"
      formControlName="some"
      readonly>
    </textarea>
  </label>

• 输入：

<input type="text" formControlName="name" />

这至少适用于输入和文本区域。