Question

我想使用 Angular 作为前端，使用 php 作为后端，将插入到数据库输入中的值插入，但我无法将输入值与 user.id 一起插入到方法中。

输入是审核原因点击不同意需要通过原因但不进入。

import { Component, OnInit, TemplateRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { observerMixin } from '@rodrigowba/observer-component';
import { ResponseData, DefaultResponse } from '@rodrigowba/http-common';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { ToastrService } from 'ngx-toastr';
import { Observable } from 'rxjs';

import { ActionPayload } from '~/ngrx';
import {
  HotsiteUser,
  HotsiteUsersFacade,
  HotsiteUsersFormService,
  RegistrationStatusTypes,
  UpdateHotsiteUserRequest,
  HotsitePointsPrebase,
} from '~/admin/users';
import {
  updateHotsiteUser,
  hotsiteUserUpdated,
  hotsiteUserUpdateFailed,
  hotsiteUserRegistrationModerated,
  hotsiteUserModerateRegistrationFailed
} from '~/admin/users/state';
import { distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';

@Component({
  templateUrl: './view.component.html',
})
export class ViewComponent extends observerMixin() implements OnInit {
  user$: Observable<HotsiteUser>;
  pointsPrebase$: Observable<HotsitePointsPrebase[]>;
  customFields$: Observable<{
    field: string,
    value: string
  }[]>;

  registrationStatusTypes = RegistrationStatusTypes;

  form: FormGroup;

  modalRef: BsModalRef;

  submiting = false;

  constructor(
    private hotsiteUsersFacade: HotsiteUsersFacade,
    private hotsiteUsersFormService: HotsiteUsersFormService,
    private modalService: BsModalService,
    private toastr: ToastrService
  ) {
    super();

    this.form = this.hotsiteUsersFormService.updateForm();
  }

  ngOnInit() {
    this.user$ = this.hotsiteUsersFacade.selectCurrentHotsiteUser();

    this.customFields$ = this.user$.pipe(
      map(user => Object.values(user.custom_fields)),
      map(customFields => customFields.map(customField => {
        let value = customField.value;

        if (Array.isArray(value)) {
          value = value.join(', ');
        }

        return {
          field: customField.field,
          value
        };
      }))
    );

    this.pointsPrebase$ = this.user$.pipe(
      map(user => user.id),
      distinctUntilChanged(),
      tap(id => {
        this.hotsiteUsersFacade.fetchHotsitePointsPrebase(id);
      }),
      switchMap(id => this.hotsiteUsersFacade.selectHotsitePointsPrebaseByHotsiteUser(id))
    );

    this.observe(this.user$).subscribe(user => {
      this.form.patchValue(user);
    });

    this.observe(
      this.hotsiteUsersFacade.ofType(updateHotsiteUser)
    ).subscribe(() => {
      this.submiting = true;
    });

    this.observe(
      this.hotsiteUsersFacade.ofType<ActionPayload<ResponseData<HotsiteUser>>>(
        hotsiteUserUpdated,
        hotsiteUserRegistrationModerated
      )
    ).subscribe(action => {
      const { message, data } = action.payload;

      this.submiting = false;
      this.toastr.success(message);
    });

    this.observe(
      this.hotsiteUsersFacade.ofType<ActionPayload<DefaultResponse>>(
        hotsiteUserUpdateFailed,
        hotsiteUserModerateRegistrationFailed
      )
    ).subscribe(action => {
      const { message } = action.payload;

      this.submiting = false;
      this.toastr.error(message);
    });
  }

  onSubmit(id: string, data: UpdateHotsiteUserRequest) {
    this.hotsiteUsersFacade.updateHotsiteUser(id, data);
  }

  openModal(template: TemplateRef<any>, size = 'modal-md') {
    this.modalRef = this.modalService.show(template, { class: size });
  }

  approveRegistration(id: string,reason: string) {
    this.hotsiteUsersFacade.moderateRegistrationHotsiteUser(id, { approved: true,reason });
  }

  rejectRegistration(id: string,reason: string) {
    this.hotsiteUsersFacade.moderateRegistrationHotsiteUser(id, { approved: false,reason });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
 <form [formGroup]="form" (ngSubmit)="onSubmit(user.id, form.value)" >
  <form [formGroup]="form" (ngSubmit)="onSubmit(user.id, form.value)" >
        <div class="row mb-3">
          <div class="col-12">
            <div class="form-group">
              <label>Name</label>
              <input type="text" [value]="user.name" class="form-control" readonly />
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="form-group">
              <label>E-mail</label>
              <input type="text" [value]="user.email" class="form-control" readonly />
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="form-group">
              <label>Document</label>
              <input type="text" [value]="user.document" class="form-control" readonly />
            </div>
          </div>
          <div class="col-12" *ngFor="let customField of customFields$ | async">
            <div class="form-group">
              <label>{{ customField.field }}</label>
              <input type="text" [value]="customField.value" class="form-control" readonly />
            </div>
          </div>
          <div class="col-auto">
            <div class="form-group">
              <mat-slide-toggle formControlName="admin" color="primary" ></mat-slide-toggle>
              <label class="ml-2">Admin</label>
            </div>
          </div>
          <div class="col-auto">
            <div class="form-group">
              <mat-slide-toggle formControlName="active" color="primary" ></mat-slide-toggle>
              <label class="ml-2">Active</label>
            </div>
          </div>
        </div>
        <ng-container *ngIf="pointsPrebase$ | async as pointsPrebase">
          <div class="row mb-3" *ngIf="pointsPrebase.length > 0">
            <div class="col-12">
              <h4 class="font-16 font-weight-bold">Points</h4>
            </div>
            <div class="col-12 col-lg-6">
              <table class="table table-striped table-sm">
                <thead>
                  <tr>
                    <th>Chave</th>
                    <th class="text-center">Points</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let points of pointsPrebase">
                    <td>{{ points.value }}</td>
                    <td class="text-center">{{ points.points }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </ng-container>
        <div class="form-row">
          <ng-container *ngIf="user.registration_status === registrationStatusTypes.AwaitingModeration">
            <div class="col-auto">
              <label>Reason</label>
              <input type="text" name="reason" placeholder="Reason of moderation..." class="form-control"/>
            </div>
            <div class="col-auto">
              <button
                type="button"
                class="btn btn-success"
                (click)="approveRegistration(user.id,form.reason)"
              >
                <app-loading-label [loading]="submiting">Approved </app-loading-label>
              </button>
            </div>
            <div class="col-auto">
              <button
                type="button"
                class="btn btn-danger"
                (click)="rejectRegistration(user.id,form.reason)"
              >
                <app-loading-label [loading]="submiting">Repproved </app-loading-label>
              </button>
            </div>
          </ng-container>
          <div class="col text-right">
            <button
              type="submit"
              class="btn btn-orange"
              [disabled]="form.invalid || submiting"
            >
              <app-loading-label [loading]="submiting">Salvar</app-loading-label>
            </button>
          </div>
        </div>
      </form>

<块引用>

错误：

'formGroup' 类型不存在属性 'reason'

Answer 1

它需要一个属性为 formControlName="reason" 的控件，这里不存在：

<input type="text" name="reason" placeholder="Reason of moderation..." class="form-control"/>

这可能是一个原因。

如果这没有帮助，您还想查看此处的 *ngIf 条件：

<ng-container *ngIf="user.registration_status === registrationStatusTypes.AwaitingModeration">

Answer 2

正如 user776686 所建议的，缺少链接到“原因”字段的 formControlName。

要在 HTML 中获取字段值，您应该访问 FormGroup 控件：

(click)="approveRegistration(user.id, form.controls.reason.value)"

您也可以在 TS 代码中创建一个“get”属性，然后在 HTML 中访问它：

get reason() {
  return this.form.controls.reason.value;
}

(click)="approveRegistration(user.id, reason)"

顺便说一句，也可以通过 FormGroup 的“get”方法访问字段：

get reason() {
  return this.form.get('reason').value;
}

每次点击将输入文本值传递给函数

2 个答案: