Formulários reativos - atributo desativado

Estou tentando usar o disabledatributo de a formControl. Quando eu coloco no template, funciona:

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

Mas o navegador me alerta:

Parece que você está usando o atributo disabled com uma diretiva de formulário reativa. Se você definir disabled como true ao configurar este controle em sua classe de componente, o atributo disabled será realmente definido no DOM para você. Recomendamos o uso dessa abordagem para evitar erros "alterado após verificação".

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

Então, eu coloquei no FormControle excluí do modelo:

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

Mas não funciona (não está desabilitando o input). Qual é o problema?

Eu tenho usado [attr.disabled]porque ainda gosto deste template orientado ao invés de programático enable () / disable (), pois é IMO superior.

mudança

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

para

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

Se você estiver usando um material mais recente, mude md-inputpara mat-input.

Você pode ativar / desativar um controle de formulário usando os seguintes métodos:

control.disable () ou control.enable ()

Se isso não funcionar, você pode usar 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 ) {
  }

}

Então você poderia usá-lo assim

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

Esta técnica é descrita aqui:

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

Espero que ajude

Descobri que precisava ter um valor padrão, mesmo que fosse uma string vazia para funcionar. Então, é isso:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

... tinha que se tornar isso:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

Veja minha pergunta (que não acredito ser uma duplicata): Passar 'desativado' no objeto de estado do formulário para o construtor FormControl não funciona

No meu caso com o Angular 8 . Eu queria ativar / desativar a entrada dependendo da condição.

[attr.disabled] não funcionou para mim, então aqui está a minha solução.

Eu removi [attr.disabled]do HTML e na função do componente executei esta verificação:

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Inicialização (componente) usando:

public selector = new FormControl({value: '', disabled: true});

Então, em vez de usar (template):

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Basta remover o atributo desativado:

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

E quando você tiver itens para mostrar, inicie (no componente): this.selector.enable();

Apenas quem está usando formulários reativos: Para elementos HTML nativos [attr.disabled] funcionará, mas para elementos materiais, precisamos desativar dinamicamente o elemento.

this.form.get('controlname').disable();

Caso contrário, ele será mostrado na mensagem de aviso do console.

Eu tentei isso no angular 7. Funcionou com sucesso.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

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

Para um formulário, o controle torna desabilitado

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

Ou método de definição inicial.

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

Use [attr.disabled] em vez [disabled], no meu caso funciona bem

adicionar disable = "true" ao campo html Exemplo: desativar

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

A beleza das formas reativas é que você pode capturar eventos de alterações de valores de qualquer elemento de entrada com muita facilidade e, ao mesmo tempo, alterar seus valores / status. Portanto, aqui está uma outra maneira de resolver seu problema usando enable disable.

Aqui está a solução completa no stackblitz .

a desativação de campos de formulário de esteira está isenta se você estiver usando a validação de formulário, portanto, certifique-se de que seu campo de formulário não tenha validações como (validators.required), isso funcionou para mim. por ex:

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

isso torna os números de telefone do usuário não editáveis.

Esta foi a minha solução:

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

no Angular-9, se você deseja habilitar / desabilitar no botão, clique aqui é uma solução simples se você estiver usando formas reativas.

definir uma função no arquivo component.ts

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

Chame-o de seu component.html

por exemplo

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Ao criar um novo controle de formulário, use próximo:

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

Se você quiser mudar a atividade, use a seguir:

this.variable.enable() 

ou

this.variable.disable()

adicione o atributo de nome à sua entrada MD. se não resolver o problema, poste seu modelo

A melhor maneira de fazer isso.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}