CODEWITHSUNDEEP
htmlangularangular-forms
omkar musale
omkar musale

Reputation: 118

How get angular form input text value?

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>

Upvotes: 0

Views: 3186

Answers (2)

Rebai Ahmed
Rebai Ahmed

Reputation: 1600

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: ''
    });
  }
  
}

Upvotes: 0

Vincent Lim
Vincent Lim

Reputation: 324

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

Upvotes: 3

Related Questions