如何以角度将数据绑定到垫子表单字段？

如何解决如何以角度将数据绑定到垫子表单字段？

我有一个拉取该数据的 http 请求，我正在 UI 上填充这些数据。现在，当用户单击编辑表单时，将显示 .当单击编辑按钮时，我们如何分配和显示字段上的值？因为我想使用该数据提交。电子邮件、名字等应显示在字段上。

当我点击编辑时，表单字段的值应该是 getuserdetails 中的值，如 firstname 、 lastname 等，如下面的示例 {{this.data.emailAddress}} 但我希望它是输入字段的值

#init

ngOnInit(): void {
    this._activatedRoute.queryParams.subscribe((params) => {
      this.userId = params.id;
      this.getUserGeneralDetails();
    });
  }

#constructor

 constructor(
    private _activatedRoute: ActivatedRoute,private _notificationService: NotificationService,private _userProfileService: UserProfileService,private _router: Router,private fb: FormBuilder
  ) {
    this.generalForm.disable();
    this.securityForm.disable();
  }

我只想在单击“编辑”时在表单域上显示数据。

 generalForm = new FormGroup({
    email: new FormControl(),fname: new FormControl(),lname: new FormControl(),phone: new FormControl(),companyName: new FormControl(),title: new FormControl(),});

刚接触有角的家伙非常想知道技术和想法。谢谢。

---

#模板

 <div class="card" #generalCard>
            <span class="anchor" id="general"></span>
            <div class="card-header">
                <mat-icon class="card-icon">group</mat-icon>
                <div class="title">GENERAL</div>
                <div class="spacer"></div>
                <button mat-button *ngIf="generalForm.disabled" (click)="generalForm.enable()">
                    <mat-icon>edit</mat-icon> Edit
                </button>
                <button mat-button *ngIf="generalForm.enabled" (click)="generalForm.disable()">
                    Cancel
                </button>
                <button mat-stroked-button *ngIf="generalForm.enabled" (click)="saveGeneralFormChanges()">
                    Save Changes
                </button>
            </div>
            <div class="card-content" *ngIf="generalForm.disabled" >
                <div class="line-item">
                    <div class="title">EMAIL</div>
                    <div class="detail">{{this.data.emailAddress}}</div>
                    <mat-icon class="active" style="color:#00B0DB;">check_circle</mat-icon>
                </div>

                <div class="line-item">
                    <div class="title">EMAIL</div>
                    <div class="detail">{{this.data.emailAddress}}</div>
                    <mat-icon>check_circle_outline</mat-icon>
                    <button mat-button class="detail active">Resend welcome email</button>
                </div>

                <div class="line-item">
                    <div class="title">FirsT NAME</div>
                    <div class="detail">{{this.data.firstName}}</div>
                </div>

                <div class="line-item">
                    <div class="title">LAST NAME</div>
                    <div class="detail">{{this.data.lastName}}</div>
                </div>

                <div class="line-item">
                    <div class="title">PHONE NUMBER</div>
                    <div class="detail">+1 {{this.data.phoneNumber}}</div>
                </div>

                <div class="line-item">
                    <div class="title">COMPANY NAME</div>
                    <div class="detail">{{this.data.companyName || 'None'}}</div>
                </div>

                <div class="line-item">
                    <div class="title">TITLE</div>
                    <div class="detail">{{this.data.title || 'None'}}</div>
                </div>
            </div>

#GetUserData

getUserGeneralDetails() {
    this.isInProgress = true;
    this._userProfileService
      .getUserGeneralDetails(this.userId)
      .pipe(finalize(() => (this.isInProgress = false)))
      .subscribe({
        next: (res) => {
          if (res.isSuccess) {
            this.data = res.data;
          }
        },error: (err) => this._notificationService.showError(err),complete: noop,});
  }

#字段代码

<div class="card-content" *ngIf="generalForm.enabled">
                <form [formGroup]="generalForm" class="generalForm">
                    <mat-form-field appearance="fill" class="email">
                        <mat-label>Email</mat-label>
                        <input matInput formControlName="email" />
                    </mat-form-field>
                    <button mat-raised-button class="validateEmail">Validate email</button>
                    <mat-divider></mat-divider>
                    <mat-form-field appearance="fill" class="fname">
                        <mat-label>First Name</mat-label>
                        <input matInput formControlName="fname" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="lname">
                        <mat-label>Last Name</mat-label>
                        <input matInput formControlName="lname" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="phone">
                        <mat-label>Phone Number</mat-label>
                        <input matInput formControlName="phone" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="companyName">
                        <mat-label>Company Name</mat-label>
                        <input matInput formControlName="companyName" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="title">
                        <mat-label>Title</mat-label>
                        <input matInput formControlName="title" />
                    </mat-form-field>
                </form>
            </div>
        </div>

解决方法

您的 HTML 代码看起来不错，根据您的问题，您在将数据填充到表单控件中时遇到了问题。这可以按如下方式完成：

constructor(private fb: FormBuilder) { }

fillUpData() {
     this.generalForm = this.fb.group({
         email: [this.data.email,[Validators.required]],fname: [this.data.fname,lname: [this.data.lname,phone: this.data.phone,companyName: this.data.companyName,title: this.data.title
    });
}

一旦你有数据，你就需要调用这个方法。所以在您调用 API 之后。

getUserGeneralDetails() {
    this.isInProgress = true;
    this._userProfileService
      .getUserGeneralDetails(this.userId)
      .pipe(finalize(() => (this.isInProgress = false)))
      .subscribe({
        next: (res) => {
          if (res.isSuccess) {
            this.data = res.data;   // After this call function.
            this.fillUpData();
          }
        },error: (err) => this._notificationService.showError(err),complete: noop,});
  }

执行此操作后，如果您收到与表单组相关的错误，则在 HTML 代码中添加诸如 *ngIf="generalForm" 之类的条件...这意味着如果表单存在，则呈现其 formControl...