Я работаю над проектом Angular, использующим библиотеку компонентов Angular.
Я делаю форму, которая имеет несколько полей, и все работает, за исключением того, что это выглядит немного забавно:
Здесь должно произойти следующее: пользователь выбирает нужное ему количество файлов и генерирует это количество полей (в этом примере 2) Пользователь заполняет поля ввода и отправляет.
Почему-то внутри моего поля ввода есть поле ввода, и я не могу понять, что мне не хватает. Я могу правильно получить данные из поля ввода, форма работает правильно, я просто не хочу иметь поле внутри поля.
HTML:
<div class="config-wrapper">
<mat-form-field id="config-field">
<div>
<mat-label>Number of configuration files</mat-label>
</div>
<mat-select formControlName="numberOfConfigPaths" (selectionChange)="onConfigChange($event)"
[ngClass]="{ 'is-invalid': isSubmitted && formControls.numberOfConfigPaths.errors }">
<option value=""></option>
<mat-option *ngFor="let number of configNumber" [value]="number.value">{{number.value}}</mat-option>
</mat-select>
</mat-form-field>
<button type="button" mat-icon-button aria-label="Configuration path folder open" id="config-path-button"
(click)="openConfigDialog();">
<mat-icon>folder_open</mat-icon>
</button>
</div>
<div *ngIf="isSubmitted && formControls.numberOfConfigPaths.errors" class="invalid-feedback">
<div *ngIf="formControls.numberOfConfigPaths.errors.required">
Number of configuration files is required
</div>
</div>
<mat-form-field [formGroup]="cfg" class="example-full-width"
*ngFor="let cfg of configPaths.controls; let i = index">
<div class="config-container">
<mat-form-field id="config-field">
<input type="text" matInput placeholder="Configuration file {{i+1}}"
formControlName="configPath"
[ngClass]="{ 'is-invalid': isSubmitted && cfg.controls.configPath.errors }"
[matAutocomplete]="comparisonAutoGroup" />
<mat-autocomplete #comparisonAutoGroup="matAutocomplete">
<mat-option *ngFor="let name of availableConfigFiles" [value]="name">
{{name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div *ngIf="isSubmitted && cfg.controls.configPath.errors" class="invalid-feedback">
<div *ngIf="cfg.controls.configPath.errors.required">Path is required</div>
</div>
</mat-form-field>
Соответствующий машинописный текст:
ngOnInit() {
this.checkForm = this.formBuilder.group({
numberOfConfigPaths: [1, Validators.required],
configFilePaths: new FormArray([])
});
.
.
.
}
get formControls() { return this.checkForm.controls; }
get configPaths() { return this.formControls.configFilePaths as FormArray; }
onConfigChange(e) {
const numberOfConfigPaths = e.value || 0;
if (this.configPaths.length < numberOfConfigPaths) {
for (let i = this.configPaths.length; i < numberOfConfigPaths; i++) {
this.configPaths.push(
this.formBuilder.group({
configPath: ['', Validators.required]
}
));
}
} else {
for (let i = this.configPaths.length; i >= numberOfConfigPaths; i--) {
this.configPaths.removeAt(i);
}
}
}
Во время отладки я пытался изолировать поле и сделать так, чтобы оно отображало только 1 поле (просто скопировал элемент в другое место), и оно работало нормально, но мне нужно, чтобы оно отображало несколько полей .
Я застрял в поиске решения. Я отвечу, если вам нужна дополнительная информация.
РЕДАКТИРОВАТЬ: Stackblitz URL: https://stackblitz.com/edit/angular-7bcgcw