Angular - How to disable a field without disabling the value

Question

Good evening guys, I have a very simple angular question. I have a form, it has a specific field that I set the value by a patch value but at the same time need to disable in that field. However after disable, the data is not sent to the back end to be inserted further. I already did the test and saw that only with the patch value, the data is sent normally and inserted in the bank normally, but when I do a disable it loses value and is not sent back, I have already tried onlyself but did not succeed, I would like help from you if possible, thanks for your attention. Ah I know that by html it works, but I wonder if there is any way I can do this in typescript by disabling the field itself in the form.

`iniciarSituacaoCadastro(){
        if(this.visualizar){
            this.formPesquisar.controls['situacaoMotivo'].patchValue(SituacaoMotivo.ATIVO);
            this.formPesquisar.controls['situacaoMotivo'].disable({onlySelf: true});
        
        }
    }`

Answer 1

As Jason said above, just use the property readonly.

The [value] will be responsible for showing the value in the input.

Here an example:

<input matInput type="text" name="situacaoMotivo" readonly="true" [value]="SituacaoMotivo.ATIVO">

Answer 2

You can try instead of disabling the field, just set as readonly, or stop working with form in this case and work with ngModel values, in which case you have no problem disabling the field because the value is already set in the variable by Binding.