将控件添加到动态 Angular 反应表单答案

【问题标题】：Add a control to a dynamic Angular reactive form将控件添加到动态 Angular 反应表单
【发布时间】：2019-08-16 01:53:14
【问题描述】：

我有一个像这样动态构建的 Angular 响应式表单：

  this.reportForm = this.fb.group({
    dwellingValues: this.fb.group({
      design: [this.report.design],
      foundation: [this.report.foundation],
      age: [this.report.age],
    }),
  });

如何将控件添加到住宅值表单组？

我试过了：

this.reportForm.addControl('dwellingValues', this.fb.group({ reportDate: [this.report.beingRenovated, Validators.required] }))

和

this.reportForm.dwellingValues.addControl('dwellingValues', this.fb.group({ reportDate: [this.report.beingRenovated, Validators.required] }))

【问题讨论】：

标签： angular

【解决方案1】：

你需要先得到dwellingValuesGroup：

const dwellingValuesGroup = this.reportForm.get('dwellingValues') as FormGroup;

然后您可以轻松地向该FormGroup 添加任何控件：

const controlToAdd = new FormControl(this.report.beingRenovated, Validators.required);

dwellingValuesGroup.addControl('reportDate', controlToAdd);

【讨论】：

【解决方案2】：

您应该尝试这种类型的响应式表单，它会起作用。 file.html

<div class="login">
<h2 class="login-header">Log in</h2>
 <form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">

  <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
  <input type="email" placeholder="Email" formControlName="email">
  </p>

<div *ngIf="isSubmitted && formControls.email.errors" class="help-block">
  <div *ngIf="formControls.email.errors.required">Email is required</div>
</div>

<p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
  <input type="password" placeholder="Password" formControlName="password">
</p>

<div *ngIf="isSubmitted && formControls.password.errors" class="help-block">
  <div *ngIf="formControls.password.errors.required">Password is 
  required</div>
</div>

   <p>
    <input type="submit" value="Log in">
   </p>
 </form>
</div>

file.component.ts

 //import this 
  import { FormBuilder, FormGroup, Validators } from  '@angular/forms';
  import { Router } from  '@angular/router';
  import { User } from  '../user';
  import { AuthService } from  '../auth.service';

export class LoginComponent implements OnInit {
 constructor(private authService: AuthService, private router: Router, private formBuilder: FormBuilder ) { }

ngOnInit() {
  this.loginForm  =  this.formBuilder.group({
    email: ['', Validators.required],
     password: ['', Validators.required]
    });
  }
}

在这里，您可以通过链接获得一些清晰的想法。 https://www.techiediaries.com/angular-tutorial-reactive-forms/

【讨论】：