angular - react 形式没有收到默认输入值

Question

我正在使用 angular 并且我有一个用于编辑项目的 react 形式。当我打开组件进行编辑时，输入会正确加载对象的值，但如果我不单击输入并更改值，则 react 形式的值为空。

我的代码在这里:

 <form [formGroup]="entidadesForm">
        <div class="row">
            <div class="col-lg-12">
                <nb-card>
                    <nb-card-header>Digite os dados solicitados</nb-card-header>
                    <nb-card-body>
                        <div class="form-group">
                            <label class="container-title" >Nome</label>
                            <input type="text" autocomplete="off" formControlName="Nome"   value="{{nome}}" class="form-control" placeholder="Nome" class="form-control"
                            />
                        </div>
                        <div class="form-group" *ngIf="entidade === 'setor' || entidade === 'unidadeproduto' " >
                            <label class="container-title">Descricao</label>
                            <input type="text" autocomplete="off" value="{{descricao}}"placeholder="Descricao" class="form-control"  formControlName="Descricao"
                            />
                        </div>
                        <div class="form-group" *ngIf="entidade === 'unidadeproduto' " >
                                <label class="container-title">Pode Fracionar</label>
                                <select class="form-control"  formControlName="PodeFracionar" >
                                    <option *ngIf="!atualizar"></option>
                                    <option [selected]="podeFracionar == 'S'" value="S" >Sim</option>
                                    <option [selected]="podeFracionar == 'N'" value="N" >Nao</option>
                                </select>
                            </div>

                    </nb-card-body>
                </nb-card>
            </div>

        </div>
    </form>

和ts文件

constructor(private fb: FormBuilder, private entidadesProdutoService: EntidadesProdutoService, private route : ActivatedRoute, private router: Router, private location: Location) {
    this.atualizar = false;
   }

  ngOnInit() {

    this.route.queryParams.subscribe( params =>{
       this.id = params['id'];
       this.nome = params['nome'];
       this.descricao = params['descricao'];
       this.podeFracionar = params['podeFracionar'];
       this.entidade = params['entidade'];
       if(this.id !== undefined) this.atualizar = true;
      });

    this.entidadesForm = new FormsModels(this.fb).formularioModel(this.entidade)

  }

  salvar( ){
    if(this.atualizar){
      this.entidadesProdutoService.atualizar(this.id, this.entidadesForm.value, this.entidade).subscribe(response => {
        this.location.back()
      },
    erro => console.log(erro))
    }else{
      this.entidadesProdutoService.salvar(this.entidadesForm.value, this.entidade).subscribe(response=>{
        this.location.back()
       },
     erro => {
       console.log(erro)
     })
    }
  }

在这里定义表单的组件:

import { FormBuilder, FormGroup } from '@angular/forms';
export class FormsModels{

    constructor(public fb: FormBuilder){}

     public formularioModel(entidade): FormGroup{
        if(entidade === 'categoria' || entidade === 'marca' || entidade === 'subcategoria' || entidade === 'secao' ){
            return this.fb.group({
                Nome: this.fb.control('', [])
              })
            }

              else if(entidade === 'setor'){
            return this.fb.group({
                Nome: this.fb.control('', []),
                Descricao: this.fb.control('', [])
              })
            }
              else if(entidade === 'unidadeproduto'){
            return this.fb.group({
                Nome: this.fb.control('', []),
                Descricao: this.fb.control('', []),
                PodeFracionar: this.fb.control('', [])
              })
            }
        }

    }

当我加载组件时，输入会加载正确的值，请参见图片:

例如，如果我只编辑输入名称，输入描述的表单值和选择输入 pode fracionar 将为空，请在此处查看控制台。

Answer 1

您的输入字段显示了正确的值，因为您在 html 中设置了 value="{{nome}}"。

在创建 FormGroup 期间，您在控件配置 this.fb.control('YOUR_EMTPY_STRING', []) 中设置了一个空字符串作为值，因此控件的值为空。

因此您需要在创建 FormGroup 期间设置控件的值，例如像这样:

this.route.queryParams.subscribe( params =>{
   this.id = params['id'];
   this.nome = params['nome'];
   this.descricao = params['descricao'];
   this.podeFracionar = params['podeFracionar'];
   this.entidade = params['entidade'];
   if(this.id !== undefined) this.atualizar = true;

   // After receiving the router params init your FormGroup
   this.entidadesForm = new FormsModels(this.fb).formularioModel(this.entidade)
});

...

public formularioModel(entidade): FormGroup{
    if(entidade === 'categoria' || entidade === 'marca' || entidade === 'subcategoria' || entidade === 'secao' ){
        return this.fb.group({
            Nome: this.fb.control(this.nome, [])
        })
    } else if(entidade === 'setor'){
        return this.fb.group({
            Nome: this.fb.control(this.nome, []),
            Descricao: this.fb.control(this.descricao, [])
        })
    } else if(entidade === 'unidadeproduto'){
        return this.fb.group({
            Nome: this.fb.control(this.nome, []),
            Descricao: this.fb.control(this.descricao, []),
            PodeFracionar: this.fb.control(this.podeFracionar, [])
        })
    }
}

否则您只需更新 FormGroup 的值，如下所示:

this.route.queryParams.subscribe( params =>{
   this.id = params['id'];
   this.nome = params['nome'];
   this.descricao = params['descricao'];
   this.podeFracionar = params['podeFracionar'];
   this.entidade = params['entidade'];
   if(this.id !== undefined) this.atualizar = true;

   // Updates the value of your FromGroup
   this.entidadesForm.setValue({Nome: this.nome, Descricao: this.descricao, PodeFracionar: this.podeFracionar});
});