Angular 反应式表单表单组实例始终未定义

Question

我正在创建一个模态作为组件，用于我的 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: Cannot read property 'valid' of undefined

组件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

我是不是漏掉了什么。任何帮助表示赞赏。

Answer 1

问题在这里：

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

而不是

   gerekce: ''

试试看

   gerekce: ['']

或

   gerekce: new FormControl('')

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

Answer 2

请在 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>

Angular 反应式表单表单组实例始终未定义

Angular reactive forms formgroup instance always undefined

angular

angular-reactive-forms