如何使formControl只读

Question

如何在有角度的readonly中进行formControl

我知道我可以用html这样做

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

如何从JS代码而不是html,即以模型驱动的方式

Answer 1

如果您使用的是Reactive Forms,则可以像下面的示例代码一样动态分配它(电子邮件字段)

    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

在我的猜测中，没有在反应形式（Angular 2+）中使用READONLY。

在普通的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;

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