TypeError: Cannot read property 'form' of undefined

Question

I just want to say that I'm a beginner with MEAN applications and I'm trying to build a MEAN Stack (Angular 5) Create-Read-Update-Delete (CRUD) Web Application from scratch using Angular CLI.

I am trying to create a component that will add a proposal do my database. I can't seem to find why I'm getting an error.

This is how my proposal-create.component.html looks like:

<div class="container">
<h1>Add New Proposal</h1>
<div class="row">
<div class="col-md-6">
<form (ngsubmit)="saveProposal()" #proposalform="ngForm">
<div class="form-group">
<label for="name">boat_type</label>
<input type="text" class="form-control" [(ngModel)]="proposal.boat_type" 
 name="boat_type" required="">
 </div>
<div class="form-group">
<label for="name">service</label>
<input type="text" class="form-control" [(ngModel)]="proposal.service" 
 name="service" required="">
 </div>
 <div class="form-group">
 <label for="name">location</label>
 <input type="text" class="form-control" [(ngModel)]="proposal.location" 
  name="location" required="">
  </div>
  <div class="form-group">
  < label for="name">job_type</label>
  <input type="text" class="form-control" [(ngModel)]="proposal.job_type" 
   name="job_type" required="">
  </div>
  <div class="form-group">
   <label for="name">status</label>
   <input type="text" class="form-control" [(ngModel)]="proposal.status" 
   name="status" required="">
   </div>

   <div class="form-group">
   <button type="submit" class="btn btn-success" 
    [disabled]="!proposalForm.form.valid">Save</button>
    </div>
    </form>
    </div>
    </div>
    </div>

my proposal-create.component.ts

 import { Component, OnInit ,ViewEncapsulation} from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpClient, HttpHeaders } from '@angular/common/http';


 @Component({
 selector: 'app-proposal-create',
 templateUrl: './proposal-create.component.html',
 styleUrls: ['./proposal-create.component.css'],
 encapsulation: ViewEncapsulation.None
 })
 export class ProposalCreateComponent implements OnInit {

  proposal = { 
  boat_type: '',
  service  : '', 
  location : '',
  job_type : '',
  status   : ''
  };

  constructor(private http: HttpClient, private router: Router) { }

  ngOnInit() {
  }


  saveProposal() {
  this.http.post('/proposal', this.proposal)
  .subscribe(res => {
      let id = res['_id'];
      this.router.navigate(['/proposal-details', id]);
    }, (err) => {
      console.log(err);
    }
  );
   }

    }

I already added the route in the src/app/app.module.ts and also I did import the FormsModule.

Solution 1

Actually you need to remove that form word

<button type="submit" class="btn btn-success" 
[disabled]="!proposalForm.valid">Save</button>

And also you don't need to use !proposalForm.valid, you can use invalid directly

<button type="submit" class="btn btn-success" 
[disabled]="proposalForm.invalid">Save</button>

Solution 2

Try to write as:

<button type="submit" class="btn btn-success [disabled]="!proposalForm.valid">Save</button>

property form does not exist on ngForm

Comments

[Andrei Călugăr]

Thank you so much! You are right I used the !proposalForm.valid and now it works .