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

Ответ, который я понял, состоит в том, чтобы изменить:

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

до

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

Answer 2

Я предлагаю вам использовать его в форме.

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);
}