Já tentei seguir o exemplo de outras respostas daqui e não consegui!

Criei um formulário reativo (ou seja, dinâmico) e quero desabilitar alguns campos a qualquer momento. Meu código de formulário:

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

meu html:

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

Reduzi o código para facilitar. Quero desativar o campo de seleção de tipo. Tentei fazer o seguinte:

form = new FormGroup({
  first: new FormControl({value: '', disabled: true}, Validators.required),
});

não está funcionando! Alguém tem uma sugestão?

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

ou

this.form.controls['name'].disable();

Preste atenção

Se você estiver criando um formulário usando uma variável para condição e tentando alterá-la mais tarde, ele não funcionará, ou seja, o formulário não será alterado .

Por exemplo

this.isDisabled = true;

this.cardForm = this.fb.group({
    'number': [{value: null, disabled: this.isDisabled},
});

e se você mudar a variável

this.isDisabled = false;

a forma não mudará. Você deveria usar

this.cardForm.get ('número'). disable ();

BTW.

Você deve usar o método patchValue para alterar o valor:

this.cardForm.patchValue({
    'number': '1703'
});

É uma má prática usar desativar em um DOM com formas reativas. Você pode definir esta opção em seu FormControl, ao iniciar o de

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

Propriedade valuenão é necessária

Ou você pode obter seu controle de formulário com get('control_name')e definirdisable

this.userForm.get('username').disable();

Eu resolvi isso envolvendo meu objeto de entrada com seu rótulo em um conjunto de campos: O conjunto de campos deve ter a propriedade disabled ligada ao booleano

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

O disablingFormControl preventsdeve estar presente em um formulário while saving. Você pode apenas definir a readonlypropriedade.

E você pode conseguir desta forma:

HTML:

<select formArrayName="value" [readonly] = "disableSelect">

TS:

this.disbaleSelect = true;

Encontrei isso aqui

Se usar disabledelementos de entrada de formulário (como sugerido na resposta correta como desabilitar a entrada ), a validação para eles também será desabilitada, preste atenção a isso!

(E se você estiver usando o botão de envio, [disabled]="!form.valid"ele excluirá seu campo da validação)

Uma abordagem mais geral seria.

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}

Se você deseja desabilitar first(formcontrol), então você pode usar a instrução abaixo.

this.form.first.disable();

Isso funcionou para mim: this.form.get('first').disable({onlySelf: true});

this.form.enable()
this.form.disable()

Ou formcontrol 'primeiro'

this.form.get('first').enable()
this.form.get('first').disable()

Você pode definir desativar ou ativar no conjunto inicial.

 first: new FormControl({disabled: true}, Validators.required)

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

A melhor solução está aqui:

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Esboço da solução (em caso de link quebrado):

(1) Crie uma diretiva

import { NgControl } from '@angular/forms';

@Directive({selector: '[disableControl]'})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {}
}

(2) Use-o assim

<input [formControl]="formControl" [disableControl]="condition">

(3) Uma vez que as entradas desativadas não são exibidas em form.value no envio, você pode precisar usar o seguinte (se necessário):

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

Eu tive o mesmo problema, mas chamar this.form.controls ['name']. Disable () não corrigiu isso porque eu estava recarregando minha visualização (usando router.navigate ()).

No meu caso, tive que redefinir meu formulário antes de recarregar:

this.form = indefinido; this.router.navigate ([caminho]);

setTimeout(() => { emailGroup.disable(); });

Você pode declarar uma função para ativar / desativar todo o controle do formulário:

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

e usar assim

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

Para fazer um campo desabilitar e habilitar de angular forma reactiva 2+

1. Para desativar

• Adicione [attr.disabled] = "true" à entrada.

<input class="form-control" name="Firstname" formControlName="firstname" [attr.disabled]="true">

Para habilitar

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

Habilitar formulário inteiro

this.formname.enable();

Habilitar campo específico sozinho

this.formname.controls.firstname.enable();

o mesmo para desativar, substitua ativar () por desativar ().

Isso funciona bem. Comentário para consultas.