Question

我只想说我是MEAN应用程序的初学者，我正在尝试使用Angular CLI从头开始构建MEAN Stack（Angular 5）创建-读取-更新-删除（CRUD）Web应用程序。 / p>

我正在尝试创建一个组件，该组件将在我的数据库中添加提案。我似乎找不到为什么我出错了。

这是我的proposal-create.component.html的样子：

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

我的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);
    }
  );
   }

    }

我已经在src/app/app.module.ts中添加了路由，并且确实导入了FormsModule。

Answer 1

实际上您需要删除该套用字

errorMessage

而且您也不需要使用！proposalForm.valid，您可以直接使用invalid

what

Answer 2

尝试写为：

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

form上不存在属性ngForm

TypeError：无法读取未定义的属性“ form”

2 个答案: