Question

我有这个模板：

...
<form>                          
    <div class="form-group">
        <label class="control-label">Trip name</label>
        <input type="text" [(ngModel)]="newTrip.trip_name" name="c_trip_name" id="c_entity_id">
    </div>
    <div class="form-group">
        <button type="button" (click)="addTrip()">Add trip</button>
    </div>
</form>
...

但是在组件中使用此代码时不会触发addTrip方法：

 addTrip() {
  console.log(this.newTrip);
  }

如果我使用输入类型=提交，那么我会得到一个完整的页面提交（无论如何不想要的行为），并且仍然没有触发该方法。知道是什么原因造成的？

Answer 1

从代码中删除<form>标记，然后像这样使用它。

<div>                          
    <div class="form-group">
        <label class="control-label">Trip name</label>
        <input type="text" [(ngModel)]="newTrip.trip_name" name="c_trip_name" id="c_entity_id">
    </div>
    <div class="form-group">
    <a (click)="addTrip()">Add trip</a>
    </div>
</div>

Answer 2

这可能对你有所帮助！
app.component.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

export class Trip {
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  trip: Trip = new Trip;

  addTrip(form: NgForm) {
    console.log(this.trip);
  }
}

app.component.html

<form #addTripForm="ngForm" no-validate>
    <div class="form-group">
        <label class="control-label">Trip name</label>
        <input type="text" [(ngModel)]="trip.name" name="name" id="name" #name="ngModel">
    </div>
    <div class="form-group">
        <button type="button" (click)="addTrip(addTripForm)">Add trip</button>
    </div>
</form>

Demo

（点击）在Angular 5中不起作用

2 个答案: