Angular 如何使用角度反应形式在父组件中添加子组件？

我正在将子组件添加到父组件窗体

Pessoa.html 提交表单时，address.html条目为空，我该怎么办

我用的是React表单

---

阅读上的角度文档，我发现：

将表单模型填充为

我正在使用

patchValue（）

：

恩德雷科 打印：

---

我是用我认为更好的方法做的。为address创建一个内部组并将其传递给address组件

.TS

Html:

//只传递内部表单组

---

这样就不需要监听子组件中的更改

Eduardo看不到代码，控制台中充满了错误！你能修改它吗？我看不出你做了什么，你能发布stackblitz吗？对不起，我不知道如何正确使用stackblitz，我刚刚重新开始，我刚刚发布了一个新的，idk为什么它没有更新我以前的表单。您的代码的问题是表单仅对用户组条目有效。如果有人需要，Project将在上更新。

<form [formGroup]="usuarioForm" novalidate>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="exampleInputNome">Nome</label>
                        <input type="text"
                               formControlName="nome"
                               class="form-control "
                               placeholder="Nome" />
                    </div>
                </div>

            <endereco [enderecoGroup]=usuarioForm></endereco>

            <button type="submit"
                    class="btn btn-default"
                    (click)="InsereUsuario(usuarioForm.value)">
                Enviar
            </button>
</form>

            <h4>Endereço</h4>
            <div class="col-md-2">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputCep">Cep</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Cep"
                           (blur)="GetAdress($event.target.value)">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputComplemento">Complemento</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Complemento"
                           [value]=endereco?.complemento>
                </div>
            </div>

@Input() enderecoGroup: FormGroup;

endereco: Endereco

GetEndereco(Cep: string) {
    this.servico.GetEndereco(Cep)
        .subscribe(resposta => this.endereco = resposta);
}

   GetEndereco(Cep: string) {
        this.servico.GetEndereco(Cep)
            .subscribe(response => {
                this.enderecoGroup.patchValue({
                    bairro: response.bairro,
                    logradouro: response.logradouro,
                    cidade: response.localidade
                });
            });
    }

this.usuarioForm = this.formBuilder.group({
  nome: this.formBuilder.control('', [Validators.required, Validators.minLength(3)]),
  sobreNome: this.formBuilder.control('', [Validators.required]),
  emailAdress: this.formBuilder.control('', [Validators.required, Validators.email]),
  tipoPessoa: this.formBuilder.control('1', [Validators.required]),
  endereco: this.formBuilder.group({ // Another form group inside the bigger group for better encapsulation.
    cep: this.formBuilder.control('', [Validators.minLength(8), Validators.maxLength(9)]),
    logradouro: this.formBuilder.control('', [Validators.required]),
    bairro: this.formBuilder.control('', [Validators.required]),
    cidade: this.formBuilder.control('', [Validators.required]),
    complemento: ''
  })
});

get endereco() {
  return this.usuarioForm.get('endereco') as FormGroup; // this is just a refence to the inside group that contains information just relavant to address
}

<endereco [enderecoGroup]=endereco></endereco> //pass just the inside formGroup