如何使formControl只读

时间：2017-08-02 05:29:23

标签： angular angular-reactive-forms

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

我知道我可以用html这样做

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

如何使用JS代码而不是html，即以模型驱动的方式

7 个答案:

答案 0 :(得分：15)

  

如果您使用的是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;

享受编码！

答案 1 :(得分：7)

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

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

例如

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

答案 2 :(得分：4)

我认为在反应式表单（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属性。 希望对您有所帮助。

答案 3 :(得分：0)

基于formControl的元素在设置为禁用时为只读：

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

但这对于IE和Chrome都是正确的，但对于Firefox是错误的....

一种流行的工作方式是在输入上添加特定于Firefox的透明

，并在透明div上单击以启用输入控件：

css：

#wrapper {
  position: relative;
  &::after {
    content: "%";
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
#click {
  width: 100%;
  height: 35px;
  position: absolute; 
  background: transparent;
}

html：

 <label>
    <span class="label">Name </span>
    <div id="wrapper">
      <div
        *ngIf="isFirefox"
        id="click"
        (click)="enable('name')"
      ></div>-->
      <input type="text" formControlName="name" readonly />
    </div>
  </label>

打字稿：

export class MyObjectComponent implements OnInit {
  @Input() public group: FormGroup;
  isFirefox = /Firefox\//i.test(window.navigator.userAgent);

  constructor() {}

  ngOnInit() {}

  enable(name) {
    this.group.get(name).enable();
  }
}

但是，此解决方案仅适用于“ ”元素，不适用于“