Мое намерение - получить данные из поля ввода только для чтения. У меня есть выбор пакетов, который динамически меняет поле ввода, которое только для чтения. Таким образом, я знаю, какой пакет пользователь выбрал для отправки. Однако, когда я регистрирую 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:
Есть ли способ получить данные из привязки свойств?