Angular 5:获取表单输入值是否更改

时间:2018-06-03 21:06:42

标签: forms angular5

如何传递# If the user decides they want to make further edits, -1 is returned and the # caller is expected to call send_message again after the edits are performed. 名为"类别1"的控件的表单输入值?更改表单时,会传递该值,但是当用户未更改该值时,该值不会被更改。我需要永远传递的价值。我该怎么做?

onNext()

请看屏幕截图:

enter image description here

1 个答案:

答案 0 :(得分:1)

尝试使用input代码而不是choice。将[(ngmodel)]设置为容器的属性,例如category1并为每个输入使用相同的名称。它不需要匹配属性名称,我随意将其设置为category1。将category1属性设置为默认值。组件的category1属性值将初始化要设置的单选按钮之一。在点击方法参数中使用category1属性。

有关工作示例,请参阅https://stackblitz.com/edit/angular-yq5w2y?file=app/app.component.ts

<div class="app-form container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="button-left float-left">
                <button (click)="onPrevious('tab-empinfo')">Previous</button>
            </div>
        </div>
        <div class="col-6">
            <div class="button-right float-right">
                <button 
                (click)="onNext('tab-selection', {
                         form: 'category', 
                         data: {category: category1}})">
                Next
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h4>Category</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
                <div class="form-group" *ngFor="let input of categorySelection">
                  <input  type="radio" *ngIf="input.type == 'radio'" [(ngModel)]="category1" name="category1" value="{{input.answer}}" > {{input.answer}}
                </div>
        </div>
    </div>
</div>
----
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  categorySelection = [{type: 'radio', answer: "who"}, {type: 'radio', answer: "what"}];
  category1 = "who";
  result;
  onPrevious(data: string) {
    this.result = data;
  }
  onNext(x, data: any): any {
    this.result = data;
  }
}