Os controles Angular 2 desativados não são incluídos no form.value

113

Percebi que se eu desabilitar um controle em uma forma reativa Angular 2, o controle não será incluído no form.value. Por exemplo, se eu definir meu formulário como a seguir:

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

e verifique this.notelinkingForm.value, se todos os controles estiverem habilitados, a saída será:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

No entanto, quando alguns dos controles estão desativados, será:

{"Enabled":true}

Observe como os controles desabilitados são excluídos.

Minha intenção é que, quando o formulário for alterado, eu quero poder passar o form.value com todas as propriedades dele para minha API restante. Isso obviamente não será possível se não contiver os itens desabilitados.

Estou faltando alguma coisa aqui ou esse é o comportamento esperado? Existe uma maneira de dizer ao Angular para incluir os itens desabilitados no form.value?

Dê as boas-vindas aos seus pensamentos.

angular angular2-forms

— Jim Culverwell
fonte

246

Você pode usar:

this.notelinkingForm.getRawValue()

Dos documentos :

Se você deseja incluir todos os valores, independentemente do status de desativado, use este método. Caso contrário, o valueimóvel é a melhor forma de obter o valor do grupo.

— Sasxa
fonte

41

Gostaria de saber por que diabos a equipe Angular fez isso

— inorganik,

@inorganik Eles fizeram isso porque é possível habilitar um controle desabilitado e editar seu valor. Nesse caso, getRawValue () retornará um objeto com o valor adulterado.

— dinamarquês de

1

Isso é realmente uma coisa boa. Por exemplo, eu sei que os valores dos meus controles desabilitados não vão mudar, então não quero incluí-los na API de salvamento porque atribuí a esses controles um valor do banco de dados em primeiro lugar. Mas em alguns casos, eu realmente quero incluir aqueles controles que têm os valores atribuídos no front end e eles não são armazenados no banco de dados e esta função cobre isso. É sempre bom ter as duas opções.

— ChiragMS

Isso é verdade @ChiragMS. Eu gosto desse aspecto, desde que eu tenha uma escolha entre readonlye disabled. Mas este não é o caso de, por exemplo, caixas de seleção e botões de opção, conforme descrevi na resposta abaixo. Nesses casos, não gostei de ter que obter os dados de maneira diferente e codificar algo especificamente para esse caso.

— Sandro

10

Outra opção que utilizo é:

this.form.controls['LinkToPreceeding'].value;

— Luis Ricardo Cayetano Herrera
fonte

7

Obrigado @Sasxa por me dar 80% do que eu precisava.

Para aqueles que procuram uma solução para o mesmo problema, mas para formas aninhadas, consegui resolver alterando o meu

this.notelinkingForm.get('nestedForm').value

para

this.notelinkingForm.getRawValue().nestedForm

— eper
fonte

0

Se você usar em readonlyvez de disabled, ainda não será editável enquanto os dados serão incluídos no formulário. Mas isso não é possível em todos os casos. Por exemplo, não está disponível para botões de rádio e caixas de seleção. Consulte os documentos da web do MDN . Nesses casos, você deve se inscrever para as outras soluções fornecidas aqui.

— Sandro
fonte