Angular 反应形式 formgroup 实例始终未定义答案

【问题标题】：Angular reactive forms formgroup instance always undefinedAngular 反应形式 formgroup 实例始终未定义
【发布时间】：2018-09-12 17:38:43
【问题描述】：

我正在创建一个模式作为组件，用于我的 SPA 的相关部分。当我单击打开模式的按钮时，我在表单组创建行上收到异常；

export class GerekceModalComponent implements OnInit {
  gerekceForm: FormGroup;
  ngOnInit(): void {
---->    this.gerekceForm = this.formBuilder.group({
      gerekce: ''
    });
  }
  constructor(public activeModal: NgbActiveModal, private formBuilder: FormBuilder) {
   closeModal() {
    this.activeModal.close('Modal Closed');
  }
}

this.gerekceForm 始终未定义

TypeError: 无法读取未定义的属性“有效”

组件html如下

<div class="modal-header">
  <h4 class="modal-title">Gerekçe</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
  </button>
</div>
<form [formGroup]="gerekceForm" (ngSubmit)="submitForm()">
  <div class="modal-boy">
    <div class="container">
      <div class="form-group shadow-textarea">
        <label for="exampleFormControlTextarea6">Gerekçe içeriği</label>
        <textarea class="form-control z-depth-1" id="exampleFormControlTextarea6" rows="3" placeholder="gerekçenizi yazınız"></textarea>
      </div>

    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-success" [disabled]="!myForm.valid">
      Submit Form
    </button>
  </div>
</form>

此组件根据本教程构建 https://itnext.io/creating-forms-inside-modals-with-ng-bootstrap-221e4f1f5648

我错过了什么。任何帮助表示赞赏。

【问题讨论】：

找不到myForm的声明！！也许这就是你得到Cannot read property 'valid' of undefined的原因。试试[disabled]="!gerekceForm.valid"。
@SlimenTN [disabled]="!gerekceForm.valid" 不见了。但即使添加它也不会改变任何事情

标签： angular angular-reactive-forms

【解决方案1】：

请在 TS 文件中添加以下代码

export class GerekceModalComponent implements OnInit {
  gerekceForm: FormGroup;
  ngOnInit(): void {
    this.gerekceForm = this.formBuilder.group({
      gerekce: ['']
    });
  }
  constructor(public activeModal: NgbActiveModal, private formBuilder: FormBuilder) {
   closeModal() {
    this.activeModal.close('Modal Closed');
  }
}

请在 HTML 文件中添加以下代码（您错过了 textarea 中的 formControlName）

<div class="modal-header">
  <h4 class="modal-title">Gerekçe</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
  </button>
</div>
<form [formGroup]="gerekceForm" (ngSubmit)="submitForm()">
  <div class="modal-boy">
    <div class="container">
      <div class="form-group shadow-textarea">
        <label for="exampleFormControlTextarea6">Gerekçe içeriği</label>
        <textarea class="form-control z-depth-1" id="exampleFormControlTextarea6" rows="3" placeholder="gerekçenizi yazınız" formControlName="gerekce"></textarea>
      </div>

    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-success" [disabled]="!myForm.valid">
      Submit Form
    </button>
  </div>
</form>

【讨论】：

【解决方案2】：

问题就在这里：

    this.gerekceForm = this.formBuilder.group({
            gerekce: ''
    });

代替

   gerekce: ''

试一试

   gerekce: ['']

或

   gerekce: new FormControl('')

来源： https://angular.io/guide/reactive-forms#step-3-generating-form-controls

【讨论】：