Получить значение из поля ввода только для чтения - Угловое - PullRequest
0 голосов
/ 15 марта 2019

Мое намерение - получить данные из поля ввода только для чтения. У меня есть выбор пакетов, который динамически меняет поле ввода, которое только для чтения. Таким образом, я знаю, какой пакет пользователь выбрал для отправки. Однако, когда я регистрирую ngForm, значение поля ввода для «Пакетов» остается пустым.

До сих пор мой подход состоял в том, чтобы установить значение поля через привязку свойства в соответствии с тем, что выбрал пользователь.

<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();
  }

}

Edit: Есть ли способ получить данные из привязки свойств?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...