Início / coding / Perguntas / 79182977
Accepted
Tim
Asked: 2024-11-13 07:05:58 +0800 CST

Você pode fazer um get(<path>) em um UntypedFormGroup se houver um '.' no parâmetro path?

  • 772

Tenho um aplicativo Angular que usa um UntypedFormGroup para armazenar e recuperar valores de entrada do usuário.

Eu adiciono controles ao UntypedFormGroup usando a função addControl assim:

this.myUntypedFormGroup.addControl('mypath', new UntypedFormControl());

e então recuperar o valor assim:

this.myUntypedFormGroup.get('mypath').value

Isso funciona bem, exceto se eu quiser usar um ponto no parâmetro do caminho.

Por exemplo, se eu quiser que o caminho seja o nome de um arquivo pdf:

this.myUntypedFormGroup.addControl('myfile.pdf', new UntypedFormControl());

Ele retorna com uma exceção de ponteiro nulo quando tento recuperá-lo:

this.myUntypedFormGroup.get('myfile.pdf').value

Acho que entendo o porquê disso: ele está interpretando o ponto final em mypdffile.pdf para indicar que 'pdf' deve ser um subcontrole de 'myfile' e, portanto, ele morre quando não consegue encontrar um subcontrole chamado 'pdf'.

Existe alguma maneira de fazer um escape no caractere de ponto final de modo que ele seja considerado uma parte literal da sequência de caracteres do caminho em vez de assumir que há um subcontrole?

Muito obrigado.

angular

1 respostas

  1. Best Answer

    Este problema é comum para UntypedFormControle FormControl.

    Por que você teria um nome de controle de formulário como nome de arquivo? Ele deveria ser definido como algo fácil de entender, como file1ou myfilePdf, algo assim.

    Em vez disso, você deve armazenar o nome e o arquivo em um formArraypara que você saiba de onde ele se originou. Não há nenhuma ordem de que um controle de formulário deva ter um HTML correspondente, então você não precisa de um campo de formulário em HTML para fileName.

    ...
new FormArray([
  new FormGroup({
    fileName: new FormControl('myFile.pdf'),
    file: new FormControl(null),
  })
])
...

    Até onde eu sei, você não pode usar .o método get, pois esse é um método conveniente em formulários para detalhar um controlName aninhado profundamente dentro do formulário. Por exemplo:form.get('address.line1').value

    Você pode escrever um método que faça base64a codificação e acesse-o, mas não acho que valha a pena o esforço.

    ...
export class App {
  form = new FormGroup({
    [this.controlNameAllowDots('my-file.pdf')]: new FormControl(null),
  });

  ngOnInit() {
    debugger;
    console.log(this.form.get(this.controlNameAllowDots('my-file.pdf'))!.value);
  }

  controlNameAllowDots(name: string) {
    return btoa(name);
  }
}

    Demonstração do Stackblitz

    • 0

relate perguntas