Угловой материал формы ввода преобразует тип в строку, если тип ввода установлен из переменной - PullRequest
0 голосов
/ 26 июня 2019

Я динамически создаю таблицу с возможностью фильтрации на основе входных данных в заголовках столбцов.У меня возникла проблема, когда тип данных, возвращаемый из ввода, приводится к строке независимо от типа ввода, , если тип ввода был установлен из переменной .Так что в моем шаблоне, если я перебираю массив class column и объявляю мой ввод как:
<input matInput [type]="column.dataType" [formControl]="this.formGroup.controls[key]">, где column.dataType === 'number'
Ввод формы возвращается компоненту в виде строки.Но если я объявлю это как:
<input matInput [type]="number" [formControl]="this.formGroup.controls[key]">,
, он вернет число.

Вот сокращенный фрагмент кода, для которого не выполняется запуск, для контекста.Почему изменяется входное значение, если я устанавливаю тип из переменной против жесткого кодирования?

@Component({
    selector: 'app-filter-table',
    templateUrl: './filter-table.component.html',
    styleUrls: ['./filter-table.component.scss']
})
export class FilterTableComponent<T> implements OnInit{
    @Input() displayColumns?: ColumnDefinition[];

    columnNames = new Array<string>();
    formGroup: FormGroup;

    ngOnInit() {
        const groupControls = {};

        this.displayColumns.forEach(columnDef => {
            const control = new FormControl();
            groupControls[columnDef.name] = control;
            this.columnNames.push(columnDef.name);
        });
        this.formGroup = new FormGroup(groupControls);
    }
    
    getControl(key: string): AbstractControl {
        return this.formGroup.controls[key];
    }

    getForm() {
        return this.formGroup.value;
    }
}
<form [formGroup]>
    <mat-table [dataSource]="dataSource" class="mat-elevation-z1">
        <div *ngFor="let column of displayColumns">
            <ng-container [matColumnDef]="column.name">
                <mat-header-cell *matHeaderCellDef>
                    <mat-form-field class="headerInput">
                         <!-- vvv-if [type]="column.type", getForm() returns a form with strings, if [type]="number", it returns numbers -->
                        <input matInput [type]="column.type" [placeholder]="column.label"
                            [formControl]="getControl(column.name)">
                    </mat-form-field>
                </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row[column.name]}} </mat-cell>
            </ng-container>
        </div>
        <mat-header-row *matHeaderRowDef="columnNames"></mat-header-row>
        <mat-row *matRowDef="let row; columns: columnNames"></mat-row>
    </mat-table>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...