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

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来说也是空的。如果没有进行编辑，我还能做什么才能从[value]中提取预填充文本？

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">