Question

我的意图是从只读输入字段中获取数据。我选择了一些软件包，这些软件包会动态更改只读的输入字段。这样，我就知道用户在提交时选择了什么软件包。但是，当我登录ngForm时，“ Packages”的输入字段的值保持为空。

到目前为止，我的方法是根据用户选择的内容通过属性绑定设置字段的值。

<form class="w-50 mb-5 mt-5" (ngSubmit)="onSubmit(f)" #f="ngForm">
      <div class="form-group">
        <div class="form-row">
          <div class="col">
            <input type="text" name="name" class="form-control" placeholder="Name" ngModel required>
          </div>
          <div class="col">
            <input type="text" name="lastname" class="form-control" placeholder="Future Family Name" ngModel required>
          </div>
        </div>
      </div>
      <div class="form-group">
        <input type="email" name="email" class="form-control" placeholder="E-Mail" ngModel required>
      </div>
      <div class="form-group">
        <input type="text" name="package" value="{{selectedPackage}}" placeholder="{{selectedPackage}}" class="form-control" readonly ngModel>
      </div>
      <div class="form-group">
        <input type="date" name="date" value="" placeholder="When is your wedding?" class="form-control" ngModel required>
      </div>
      <div class="form-group">
        <textarea class="form-control" name="text" rows="4" placeholder="Your message.." ngModel></textarea>
      </div>
      <div class="w-100 d-flex justify-content-center">
        <button type="submit">Send</button>
      </div>
    </form>

打字稿：

import {Component, Input, OnChanges, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit, OnChanges {

  @Input() selectedDiv: number;
  selectedPackage: string;

  onSubmit(form: NgForm): void {
    console.log(form);
  }

  changePackageInfo(): void {
    if (this.selectedDiv === 0) {
      this.selectedPackage = 'Please choose a package from the selection above!';
    }
    if (this.selectedDiv === 1) {
      this.selectedPackage = 'You\'ve chosen Package One';
    }
    if (this.selectedDiv === 2) {
      this.selectedPackage = 'You\'ve chosen Package Two';
    }
    if (this.selectedDiv === 3) {
      this.selectedPackage = 'You\'ve chosen Package Three';
    }
  }

  public ngOnChanges(changes) {
    if ('selectedDiv' in changes) {
      this.changePackageInfo();
      }
    }

  constructor() { }

  ngOnInit() {
    this.changePackageInfo();
  }

}

编辑：有什么方法可以从属性绑定中获取数据吗？

从只读输入字段中获取值-角度

0 个答案: