How to make a formControl readonly

问题:

How to make a formControl in angular readonly

I know i can do it in html like

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

how to do it from JS Code and not html i.e in a model driven way

回答1:

If you are using Reactive Forms you can assign it dynamically like in the example code below (email field)

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],
});

If you want to get all the values including disabled controls you should use:

this.registerForm.getRawValue();

View method comment on source code

/**
   * 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;

Enjoy coding!

回答2:

We can use any html attribute and bind it in angular using [].

So,you can use attribute binding for the attribute readonly in that control

e.g

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