角 - 无法将形式控件添加到字段中 我正在尝试将用作自动完整字段的FormControl添加到FormGroup，但我无法做到。 TS文件： Export类EditchannelfieldScomponent oninit { field_name ...

Question

html文件：

<form [formGroup]="form" (submit)="onSaveChannelFields()" *ngIf="!isLoading">

    <mat-form-field>
        <input type="text" matInput [formControl]="field_name" [matAutocomplete]="auto" placeholder="Field name">
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                field_name: {{option.field_name}}
                field_value: {{option.field_value}}
                description: {{option.description}}
                group_name: {{option.group_name}}
                group_value: {{option.group_value}}


            </mat-option>
        </mat-autocomplete>
    </mat-form-field>

    <div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">
        <mat-form-field>
            <input matInput type="text" formControlName="field_value" [(readonly)]="isFieldChannelMatch"
                placeholder="Field value">
            <mat-error *ngIf="form.get('field_value').invalid">Please enter field value.</mat-error>
        </mat-form-field>

    </div>


    <div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">

        <mat-form-field>
            <input matInput type="text" formControlName="description" [(readonly)]="isFieldChannelMatch"
                placeholder="Description">
            <mat-error *ngIf="form.get('field_value').invalid">Please enter the fields description.</mat-error>
        </mat-form-field>
    </div>
    <div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">

        <mat-form-field>
            <input matInput type="text" formControlName="group_name" [(readonly)]="isFieldChannelMatch"
                placeholder="Group name">
            <mat-error *ngIf="form.get('group_name').invalid">Please enter group name.</mat-error>
        </mat-form-field>
    </div>

    <div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">

        <mat-form-field>
            <input matInput type="text" formControlName="group_value" [(readonly)]="isFieldChannelMatch"
                placeholder="Group values">
            <mat-error *ngIf="form.get('group_value').invalid">Please enter group value.</mat-error>
        </mat-form-field>
    </div>




    <button mat-raised-button color="accent" type="submit">{{saveButtonText}}</button>
</form>

我试图将表单控件添加到组中，但它不起作用，我不确定为什么它不起作用。

如果我在函数中取消注销代码

initializeFormAndItsFields

，则所有表单值在调用函数

undefined

时将所有形式值打印为

onSaveChannelFields

。

我没有看到与此相关的任何其他堆栈溢出问题。

欢迎任何帮助。
    

在这条线：<input type="text" matInput [formControl]="field_name" [matAutocomplete]="auto" placeholder="Field name">

您指的是

field_name

（变量），但不是

FormControl

Answer 1

FormControl

。

just将

form

属性更改为

FormGroup

属性与您对其余部分的所做的属性相同。

[formControl]

demo @stackblitz 注：

formControlName

属性不支持双向绑定，您必须应用

FormControl

（单向绑定）而不是

<input type="text" matInput formControlName="field_name" [matAutocomplete]="auto" placeholder="Field name">

（双向绑定）。