How get angular form input text value?

Question

I am working on a form ,I have two fields contact number and alternate contact number. My aim is if the value entered in alternate contact number matches with contact number then it should push.msg "please change number".I tried ngModel and onchange event but that dosen't seem to work.

html

   <div class="ui-g-12 ui-md-6">
                    <div class="ui-g-12 ui-md-6 ui-md-nopad ui-g-nopad">Mobile Number<span style="color:red">*</span>
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-md-nopad ui-g-nopad">
                        <p-inputMask  mask="9999999999" placeholder="Contact No." formControlName='Proposercontact'>
                        </p-inputMask>
                    </div>
                </div>

 <div class="ui-g-12 ui-md-6">
                    <div class="ui-g-12 ui-md-6 ui-md-nopad ui-g-nopad">Alternate Contact no<span
                            style="color:red">*</span>
                    </div>

                    <div class="ui-g-12 ui-md-6 ui-md-nopad ui-g-nopad">
                        <p-inputMask mask="9999999999" placeholder="Contact No." formControlName='Proposercontact1'>
                        </p-inputMask>
                    </div>
                </div>

At what event you want to show the message? As and when the user types or when the form is submitted? — Zam Abdul Vahid
– Zam Abdul Vahid, Commented Apr 16, 2021 at 9:36

Vincent Lim · Accepted Answer · 2021-04-16 08:47:51Z

3

How you put ngModel? Should be like this:

In your component.html:

<p-inputMask  mask="9999999999" placeholder="Contact No." [(ngModel)]="contactNo">
</p-inputMask>

In your component.ts:

contactNo: string;

You can refer to this PrimeNG StackBlitz example

answered Apr 16, 2021 at 8:47

Vincent Lim

3342 silver badges9 bronze badges

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

Comments

Rebai Ahmed · Accepted Answer · 2021-04-16 08:54:15Z

If you would to use Reactive Forms with your project , by injecting

<div class="ui-g-12 ui-md-6" [formGroup]="nameForm">
                    <div class="ui-g-12 ui-md-6 ui-md-nopad ui-g-nopad">Alternate Contact no<span
                            style="color:red">*</span>
                    </div>

                    <div class="ui-g-12 ui-md-6 ui-md-nopad ui-g-nopad">
                        <p-inputMask mask="9999999999" placeholder="Contact No." formControlName='Proposercontact1'>
                        </p-inputMask>
                    </div>
                </div>

And you should define the FormGroup instance in your ts code :

import { Component, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public nameForm:FormGroup;
  myusername: string = "";
  constructor( private formBuilder: FormBuilder) {
    this.nameForm = this.formBuilder.group({
      Proposercontact1: ''
    });
  }
  
}

Collectives™ on Stack Overflow

How get angular form input text value?

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