Question

我有以下模板。我正试图掌握反应形式，但遇到了问题。

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form>
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form>
    </div>
</form>

然后在我的组件中我有：

@Component({
    selector: 'guest-input',
    templateUrl: './guest-input.component.html',
})
export class GuestInputComponent implements OnInit {
    @Input()
    guest: Guest;

    guestForm: FormGroup;

    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.guestForm = this._fb.group({
            firstname: ['test', [Validators.required, Validators.minLength(3)]]
        });
    }

这一切对我来说都很好，但由于某些原因我得到了：

错误：未捕获（在承诺中）：错误：formControlName必须与父formGroup指令一起使用。您将要添加formGroup 指令并将其传递给现有的FormGroup实例（您可以在类中创建一个）。

我以为我已经在<form>中声明了这一点。

Answer 1

您在带有FormGroup指令的表单标记中嵌套了表单标记，将其删除：

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form> -> Remove this
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form> -> Remove this
    </div>
</form>

Answer 2

在modelDrivenForms中，[formGroup]="guestForm"应位于父元素

中

<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm">
  <label>First Name*  </label>
  <input formControlName="firstname" type="text" class="form-control input-sm">
</div>

Answer 3

不使用formGroup进行表单控制时。

错误代码：

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      formControlName="promotionMaterial"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input formControlName="offer" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      formControlName="termsAndConditions"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

在[错误代码]中，我使用“ formControlName”，因此它不适用于我。

解决方案：

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      [formControl]="promotionMaterial"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input [formControl]="offer class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      [formControl]="termsAndConditions"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

在解决方案中，我采用由formControlName插入的[formControl]，效果很好

Answer 4

<div class="col-md-12" formArrayName="educations">
</div>

ts 文件代码

educations: this.formBuilder.array([]),

或

<form [formGroup]="manageOrderForm">

</form>

ts 文件代码从'@angular/router'导入{路由器}；

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  manageOrderForm: any;
}

错误：formControlName必须与父formGroup指令一起使用。你需要添加一个formGroup指令 - Angular reactive forms

4 个答案: