Question

我需要能够在不实时更改的情况下编辑用户信息。

<input matInput placeholder="Street Name" [(ngModel)]="adr.streetAddress" name="streetAddress" type="text">

这有效，但是它可以实时更改。

<input matInput placeholder="Street Name" ngModel [value]="adr.streetAddress" name="streetAddress" type="text">

这也可以，但是，如果我单击文档进行编辑，则预填充文本正确，但是，如果我单击保存而未进行任何更改，则ngSubmit的值对于streetAddress而言为空。在不进行任何编辑的情况下，如何使[值]中的预填充文本也提交？

Answer 1

我建议您以表格方式使用它。

Component.Html：

<form [formGroup]="MyFormGroup" #ngForm>
    <mat-form-field>
        <input matInput placeholder="Enter User Name" formControlName="username">
    </mat-form-field>
</form>

Component.ts

MyFormGroup: FormGroup;
usernameFormControl = new FormControl('', []);
constructor( private formBuilder: FormBuilder ) { }
ngOnInit() {
    this.MyFormGroup = this.formBuilder.group({
        username: this.usernameFormControl
    });
}

然后，您始终可以获取表单的当前值，而无需将其用作双向绑定。例如：

register() {
    console.log(this.MyFormGroup.value.username);
}

Answer 2

我想出的答案就是改变：

<input matInput placeholder="Street" ngModel [value]="adr.streetAddress" name="streetAddress" type="text">

到

<input matInput placeholder="Street" [ngModel]="adr.streetAddress" name="streetAddress" type="text">

Angular 5 Typescript编辑文档预填充文本未正确保存

2 个答案: