小编Liv*_*she的帖子

我在父组件和子组件内的部分中有角反应形式。

在子组件内，我有一个复选框 - 当它被选中时 - 更多字段打开，我希望它们都是必需的。

我正在使用 setValidators 但出现错误

ParentFormComponent.html:3 ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：'ng-valid：true'。当前值：'ng-valid：false'。在 viewDebugError (core.js:7601) at expressionChangedAfterItHasBeenCheckedError (core.js:7589) at checkBindingNoChanges (core.js:7691) at checkNoChangesNodeInline (core.js:10560) at checkNoChangesNode (core.js:10541) at debugcore.NoChangesNode js:11144) at debugCheckRenderNodeFn (core.js:11098) at Object.eval [as updateRenderer] (ParentFormComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087) at checkNoChangesView (core.js: 10442)

ParentFormComponent.html:3 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 2, nodeDef: Object, elDef: Object, elView: Object}

这是 ParentFormComponent.html:3 的行

 <form [formGroup]="parentForm" (ngSubmit)="submitForm()">

这是我的代码：

<label class="container">DB
    <input #db type="checkbox" name="db" (change)="checkValue(db.name, db.checked)"> 
    <span class="checkmark"></span>
</label>

<div *ngIf="db.checked" …

如何在子组件中使用formGroupName？例如：

我有ParentFormComponent

    parentForm: FormGroup;
    constructor(private fb: FormBuilder, private http: Http) { }
    ngOnInit() {


 this.parentForm = this.fb.group({
        _general: this.fb.group ({
           ProjectName:''
       })
  })
 }

在html中：

  <form [formGroup]="parentForm" (ngSubmit)="submitForm()">
     <div formGroupName="_general">
        <mat-form-field>
             <input matInput placeholder="Project name" 
             formControlName="ProjectName">
        </mat-form-field>
    </div> 
  </form> 

它工作得很好，但是当我想使用子组件时，它不起作用：

<form [formGroup]="parentForm" (ngSubmit)="submitForm()">
          <app-child [parentForm]='parentForm'></app-child>
      </form> 

当我将其插入子组件时：

<div formGroupName="_general">
            <mat-form-field>
                 <input matInput placeholder="Project name" 
                 formControlName="ProjectName">
            </mat-form-field>
        </div> 

并在ts文件中

 @Input() parentForm:FormGroup;

我收到错误消息：formGroupName必须与父formGroup指令一起使用。您需要添加一个formGroup指令，并将其传递给现有的FormGroup实例（您可以在类中创建一个）。