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

由于您使用的是反应形式，因此可以使用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条件失败。

Answer 2

如果要使用相同的组件来保存用户详细信息并编辑用户详细信息。您必须使用相同的组件创建两条路线。而且，如果您使用的是编辑路线，则只需下面的代码即可。

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

OR

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 3

我不确定这是否有帮助，但是，以反应形式设置表单控件值的另一种方法是：

@RunWith(SpringRunner.class)
@TestExecutionListeners(MockitoTestExecutionListener.class)
@ContextConfiguration
public class CreateApplicationTest {

@Autowired
@InjectMocks
ApplicationService applicationService;

@Mock
private ApplicationRepository applicationRepository;

@Before
public void init() {
    MockitoAnnotations.initMocks(this);
}

@Test
public void createApplication() {

    `doReturn("value of passwordEncoder").
         when(applicationService).getPasswordEncoder();`

    CreateApplicationDTO dto = new CreateApplicationDTO("some info");
    given(this.applicationService.createApplication(dto)).willReturn(null);
    ApplicationResultDTO application = applicationService.createApplication(dto);
    assertThat(application, is(someValue));
}

反应形式的数据绑定

3 个答案: