привязка данных для реактивных форм

Question

Извините за мои вопросы, я очень новичок в angular, и я так запутался в этом.

Мне нужно создать функцию для редактирования моих пользователей.Поэтому я должен нажать на кнопку «Изменить» и получить ту же форму, что и «Создать», но заполненную информацией о пользователях.

Можете ли вы помочь мне улучшить функцию.

Обновление:

Я обновляю свою новую версию без ngModel, я хочу использовать patchValue (), но я не знаю, где и что делать, чтобы сохранить новый тип данных пользователем и обновить родительский компонент

Html

<div class="manage-content">
  <div class="title">
    <mat-icon class="user-icon">how_to_reg</mat-icon>
    <h3>Edit a user</h3>
  </div>
  <form [formGroup]="form" (ngSubmit)="onUpdate()">
    <mat-form-field class="full-width-input">
      <input id="firstName" matInput placeholder="First name" formControlName="f_name"#f_name>
      <mat-error *ngIf="isFieldInvalid('f_name')">
        The first name you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="middleName" matInput placeholder="Middle name" formControlName="m_name" #m_name>
      <mat-error *ngIf="isFieldInvalid('m_name')">
        The middle name you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="lastName" matInput placeholder="Last name" formControlName="l_name" #l_name>
      <mat-error *ngIf="isFieldInvalid('l_name')">
        The last name you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="email" matInput placeholder="Email" formControlName="email"  #email>
      <mat-error *ngIf="isFieldInvalid('email')">
        The email you've entered is malformed.
      </mat-error>
    </mat-form-field>

    <div class="cta-btn">
      <button mat-raised-button class="createUserBtn" color="primary" type="submit" (click)="onCloseConfirm()">Update user</button>
      <button mat-raised-button class="createUserBtn" color="warn" type="submit" (click)="onCloseCancel()">Cancel</button></div>
  </form>
</div>

Могу ли я использовать для обновления формы с отправки?

parentComponemt.ts (только часть, открывающая диалоговое окно editUser)

  openEditDialog(user): void {
    let dialogRef = this.dialog.open(EditUserDialogComponent, {
      width: '30%', disableClose: true, data:  user
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog Closed ${result}`);
      this.dataSource.data = [...this.dataSource.data];
      console.log(this.dataSource.data);
      this.dialogResult = result;
    })
  }

editUser.ts

  constructor(private formBuilder: FormBuilder, private userService: UserService, public dialog: MatDialog, public thisDialogRef: MatDialogRef<EditUserDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) {
    this.selectedUser = data;
    this.form = this.formBuilder.group({
      f_name: [this.selectedUser.name, Validators.compose([Validators.required, Validators.maxLength(100)])],
      m_name: [this.selectedUser.m_name, Validators.compose([Validators.maxLength(100)])],
      l_name: [this.selectedUser.l_name, Validators.compose([Validators.required, Validators.maxLength(100)])],
      email: [this.selectedUser.email, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$')])]
    });
  }


  isFieldInvalid(field: string) {
    return (
      (!this.form.get(field).valid && this.form.get(field).touched) ||
      (this.form.get(field).untouched && this.formSubmitAttempt)
    );
  }

  onUpdate() {
    this.form.patchValue({
      f_name: this.form.value.f_name ,
      m_name: this.form.value.m_name,
      l_name: this.form.value.l_name,
      email: this.form.value.email
    });
    console.log(this.form.value); // the log is what I want , but How update my parent component table ?
  }

Answer 1

Если вы хотите использовать один и тот же компонент для сохранения пользовательских данных и редактирования пользовательских данных.Вы должны создать два маршрута, используя один и тот же компонент.А если вы используете режим редактирования маршрута, просто введите ниже код.

this.form.patchValue({
   f_name: 'Test First Name',
   m_name: 'Test Middle Name',
   l_name: 'Test Last Name',
   email: 'Test Email',
});

ИЛИ

const user = {
       f_name: 'Test First Name',
       m_name: 'Test Middle Name',
       l_name: 'Test Last Name',
       email: 'Test Email',
    }

this.form.patchValue(user);

Answer 2

Я не уверен, поможет ли это, но другой способ установки значения элемента управления формы в реактивной форме:

EditMethod()
{
this.form.get("formControlName").setValue("the value you get from your back end");
}

Answer 3

Поскольку вы используете реактивные формы, вы можете использовать formControlNames для заполнения полей ввода по своему усмотрению, например,

В вашем component.ts сначала определите, находитесь ли вы в режиме редактирования или нет, затем выможет сделать что-то вроде этого:

initForm() {
let firstName = '';
if (editMode) {
firstName = "value of first name you get from backend or in some other way";
}
this.form = this.formBuilder.group({
      f_name: [firstName, Validators.compose([Validators.required, Validators.maxLength(100)])]

    });
}

Так что, если вы не находитесь в режиме редактирования, поле будет пустым, так как условие if не выполняется.