Angular reactive forms formgroup instance always undefined

Question

am creating a modal as a component to be used on related part of my SPA. when i click the button that opens the modal i receive an exception on formgroup creation line;

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 is always undefined

TypeError: Cannot read property 'valid' of undefined

the component html is as bellow

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

this component build according to this tutorial https://itnext.io/creating-forms-inside-modals-with-ng-bootstrap-221e4f1f5648

am I missing some thing. any help is appreciated.

I can't find the declaration of myForm!! maybe that's why you get Cannot read property 'valid' of undefined. Try [disabled]="!gerekceForm.valid". — SlimenTN
– SlimenTN, Commented Sep 12, 2018 at 9:23
@SlimenTN [disabled]="!gerekceForm.valid" was mising. but even adding it does not change any thing — MuhanadY
– MuhanadY, Commented Sep 12, 2018 at 9:28

Raj · Accepted Answer · 2018-09-12 09:38:43Z

Please add following code in TS File

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');
  }
}

Please add following code in HTML File (You missed the formControlName in textarea)

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

jmdavalos · Accepted Answer · 2018-09-12 09:29:28Z

1

Problem's here:

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

Instead of

   gerekce: ''

Try either

   gerekce: ['']

or

   gerekce: new FormControl('')

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

answered Sep 12, 2018 at 9:29

jmdavalos

1676 bronze badges

Collectives™ on Stack Overflow

Angular reactive forms formgroup instance always undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related