Pass input text value to function per click

Question

I want to insert the value inserted into an input in the database using Angular as the frontend and php as the backend but I'm not able to insert the input value into the method along with the user.id.

The input is for the reason of moderation when clicking on disapprove it is necessary to pass the reason but it is not entering.

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>

Error:

Property 'reason' does not exist on type 'formGroup'

Astor · Accepted Answer · 2021-06-02 23:03:38Z

1

As user776686 suggested, there is a formControlName missing linked to "reason" field.

To get the field value in HTML you should access to the FormGroup controls:

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

Also you can create a "get" property in TS code and then access to it in HTML:

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

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

BTW, a field can be accessed too through the "get" method of a FormGroup:

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

edited Jun 2, 2021 at 23:03

answered Jun 2, 2021 at 22:58

Astor

4263 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user776686 · Accepted Answer · 2021-06-02 19:04:34Z

0

It expects a control with the attribute formControlName="reason" which is not present here:

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

This might be a reason.

If that doesn't help, you my also want to look into the *ngIf condition here:

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

answered Jun 2, 2021 at 19:04

user776686

8,79817 gold badges80 silver badges139 bronze badges

Collectives™ on Stack Overflow

Pass input text value to function per click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related