CODEWITHSUNDEEP
angularangular6angular7angular-reactive-formsangular-forms
Anurag Ranjan
Anurag Ranjan

Reputation: 169

failed to set value to the formControl

I am trying to set value to a formConfrol Field ReferCode, by taking value of a variable coming from Route name reff , where I am unable to set it

I am sharing code

ts > 

ReferCode = new FormControl('');
  Refrr : any;
  constructor(

    private _route: ActivatedRoute,
  ) {
     this.user = new FormGroup({
    'ReferCode': this.ReferCode,
    });
    this._route.queryParams.subscribe(params => {
     this.Refrr = params['referral'];
     console.log(this.Refrr);
     if(this.Refrr){
     this.user.controls['ReferCode'].setValue(this.Refrr);
     this.user.controls['ReferCode'].patchValue(this.Refrr);
     }

html 

 <form class="signin-form" novalidate (ngSubmit)="user_signup(user)" [formGroup]="user">

            <mat-form-field class="form-input-width">
              <input
                matInput
                placeholder="Enter Referral Code: (Optional)"
                value=""
                name="ReferCode"
                [(ngModel)]="referCode"
                formControlName="ReferCode"
              />

      <button mat-button >
        Sign Up
      </button>
    </form>

Upvotes: 0

Views: 1523

Answers (4)

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

This function is functionally the same as setValue at this level. It exists for symmetry with patchValue on FormGroups and FormArrays, where it does behave differently.

So your HTML Code will be

<form class="signin-form" novalidate (ngSubmit)="user_signup(user)" [formGroup]="user ">
    <mat-form-field class="form-input-width">
        <input matInput placeholder="Enter Referral Code: (Optional)" name="ReferCode" formControlName="ReferCode" />
  </mat-form-field>
<button mat-button>Sign Up</button>
</form>

Working_Demo

Upvotes: 1

Denuka
Denuka

Reputation: 1242

In template driven forms to set values to part of the form

@ViewChild('f') signupForm: NgForm;
this.signupForm.form.patchValue({
userData: {
    username: suggestedName
  }
});

In reactive forms, you can use

signupForm: FormGroup;
this.signupForm.patchValue({
userData: {
    username: 'suggestedName'
  }
});

you can set default values inside ngOnInit() or using a click event (within a method).

Upvotes: 0

Tan Nguyen
Tan Nguyen

Reputation: 164

Html:

<form class="signin-form" novalidate (ngSubmit)="user_signup(user)" [formGroup]="user">
    <mat-form-field class="form-input-width">
        <input
                matInput
                placeholder="Enter Referral Code: (Optional)" 
                name="ReferCode" 
                formControlName="ReferCode"
        />
    </mat-form-field>
        <button mat-button >
            Sign Up
        </button>
</form>

TS:

this.user.setValue('ReferCode', this.Refrr);

Upvotes: 0

tabish ahmed
tabish ahmed

Reputation: 11

The best approach is like this use patchValue().

Try this out, it will definitely help you a lot in future too

this.user.patchValue({ReferCode:this.Refrr})

Upvotes: 0

Related Questions