Question

我正在获取数据并将其显示在反应形式的输入中：

function increment_counter() {

   //read actual counter from DB
   $counter = get_actual_counter_from_db();

   //$counter++; //this works if I use only digits... but for digits/letters?

   $counter = str_pad($counter, 5, '0', STR_PAD_LEFT);

   //update DB with new counter

   update_counter_in_db($counter);

}

此表单控件是在反应形式中创建的：

<div *ngFor="let users of getUsersArray; let i = index;">
    <mat-form-field>
        <input matInput color="warn" 
        [value]="users.role_type" 
        formControlName="edit_role_type" placeholder="Role Type">
    </mat-form-field>&nbsp;
</div>

我有一个更新按钮，所以如果用户想用新数据更新字段：

'edit_role_type': new FormControl({value:'', disabled: true}, Validators.required),

如果在单击更新按钮时控制<button mat-raised-button color="warn" (click)="updateUser(users)" [disabled]="formGroup4.valid"> <mat-icon>update</mat-icon> Update Data </button>的值，则可以看到从users生成的数据。

如果更改了该值并进行控制，则只会看到旧的值，而不会显示新键入的值。

这是更新按钮脚本：

*ngFor

Answer 1

使用反应式表单时，请勿将[value]="users.role_type"绑定到输入。在创建formControlName时仅使用FormControl并设置值。

在您的formGroup中，您应该有一个FormArray，并为数组中的每个用户创建edit_role_type FormControl。

使用反应形式时，用于预填充数据的模型不是双向绑定的。输入值更改时，用户数组将不会更改。相反，您应该在更新单击处理程序中从表单this.formGroup.value获取数据，并根据表单数据更新用户。

或者您可以删除反应形式，使用模型驱动的形式，并通过[(ngModel)]使用两种方式进行绑定。

Angular 6无法获得显示在ngFor循环数据中的数据的输入中键入的新值

1 个答案: