#angular #typescript #input #user-input #auto-generate
Вопрос:
Итак, у меня есть поле ввода, которое позволяет вводить только числа. Чего я хочу добиться, так это того, что когда я наберу номер в этом поле ввода, оно сгенерирует набор полей(имя, адрес, номер, адрес электронной почты). Например, я набрал 3 в поле ввода, оно должно автоматически добавить 3 набора полей(имя, адрес, номер, адрес электронной почты). Прямо сейчас я использую кнопку добавить, чтобы добавить поля вручную, и есть набор полей, который уже виден пользователю. Вот код для вашей справки:
для полей ввода чисел:
<mat-form-field appearance="outline" class="width-3">
<mat-label>Total number of person on board</mat-label>
<input
maxlength="50"
matInput
formControlName="totalNumberPersonsOnBoard"
placeholder="number of persons on board"
(input)="inputTotal(total.value)"
#total
appNumbersSpecial
required
/>
<mat-error>Error! only numbers are allowed</mat-error>
</mat-form-field>
для набора полей, которые будут сгенерированы:
<div formArrayName="passenger">
<div
*ngFor="let passengerGroup of passenger?.controls; let i = index"
[formGroupName]="i"
>
<div class="container">
<div class="row justify-content-start">
<div class="col-md">
<mat-form-field appearance="outline" class="width-1">
<mat-label>Passenger's name</mat-label>
<input
maxlength="50"
matInput
formControlName="name"
placeholder="Passenger's name"
required
/>
</mat-form-field>
</div>
<div class="col-md">
<mat-form-field appearance="outline" class="width-1">
<mat-label>Passenger's address</mat-label>
<input
maxlength="250"
matInput
formControlName="address"
placeholder="Passenger's address"
required
/>
</mat-form-field>
</div>
<div class="col-md">
<mat-form-field appearance="outline" class="width-1">
<mat-label>Passenger's emergency phone</mat-label>
<input
maxlength="50"
matInput
formControlName="phone"
placeholder="Passenger's emergency phone"
#pass
required
/>
<mat-error>Error! only numbers are allowed</mat-error>
</mat-form-field>
</div>
<div class="col-md">
<mat-form-field appearance="outline" class="width-1">
<mat-label>Passenger's email</mat-label>
<input
formControlName="email"
maxlength="50"
name="email"
id="email"
placeholder="email@address.com"
autocomplete="off"
type="text"
matInput
#email
required
/>
<mat-error>Error! email is incorrect</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
Вот код для кнопки добавить:
<div class="center">
<button
type="button"
class="next-button"
mat-flat-button
matTooltip="Add new passenger"
matTooltipClass="tooltipClass"
matTooltipPosition="below"
(click)="addPassenger()"
>
<mat-icon>add</mat-icon>
</button>
</div>
Вот код TS для добавления полей ввода:
addPassenger(): void {
this.passenger.push(
new FormGroup({
name: new FormControl(),
address: new FormControl(),
phone: new FormControl(),
email: new FormControl('', [
Validators.pattern(
/[a-zA-Z0-9.-_]{1,}@[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}/
),
]),
})
);
}
Ответ №1:
Почему бы вам не вызвать метод addPassenger()
из inputTotal()
?
Вы можете проверить это в stackblitz:
https://stackblitz.com/edit/angular-angular-material-themes-udknw9?file=src/app/app.component.ts
inputTotal(length) {
if (length < 0) {
return;
}
length = Math.min(length, 50);
if (length > this.passengeres.length) {
const size = length - this.passengeres.length;
for (let i = 0; i < size; i ) {
this.addPassenger();
}
} else if (length < this.passengeres.length) {
const size = this.passengeres.length - length;
for (let i = 0; i < size; i ) {
this.removePassenger();
}
}
}