Angular Reactive forms default input value

Question

Hello I have angular reactive forms my code looks like this:

this.rForm = fb.group({
  'membership' : '',
  'pointed' : '',
});

so I'm getting values after submit form

this.selectedMembership = this.rForm.get('membership').value;
this.pointed = this.rForm.get('pointed').value;

html code lools like this:

    <div class="membership">
            <div *ngFor="let m of membership | async" class="membershipBtnGroup " data-toggle="buttons">
                <input  type="radio" formControlName="membership" value="{{ m.level }}" id="{{ m.title }}" class="input-hidden" />
                <label  for="{{ m.title }}">
                    <img src="{{ m.imageUrl }}">
                    <br><br>
                    <input type="text" pattern="[0-9]*" formControlName="pointed" value="{{ m.points }}" class="form-control pointed">

                </label>                                                 
            </div>        
    </div>

so on click to image, it is selecting radio input and getting value of m.level. I have small css code when it clicks to image another text input "pointed" is showing width default m.points value, but if I change this text input to other value it is saving this value but if I not touched and not changed it is not saving default value

<input type="text" pattern="[0-9]*" formControlName="pointed" value="{{ m.points }}" class="form-control pointed">

so when I click image

<img src="{{ m.imageUrl }}">

it is showing radio and text inputs, radio data is saving correctly but text input data (width default value, if I not touched) not saving.

I want to get default value if I not touched and not changed input, but if I will change input it must save new value.

M Usman Nadeem · Accepted Answer · 2018-07-13 07:58:49Z

7

yes you can use new FormControl()

this.rForm = fb.group({
   'membership' : new FormControl('def value'),
   'pointed' : ['def value', Validators.required ],,
});

also you get more details options in docs

below is the link of doc here

answered Jul 13, 2018 at 7:58

M Usman Nadeem

4252 silver badges13 bronze badges

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

3 Comments

Gocha Gochitashvili Over a year ago

membership already is working good and it gets other value, but pointed not gets default value, but I not want it to be required.

Gocha Gochitashvili Over a year ago

also I can't set default value in ts file because I have binding array in html form

M Usman Nadeem Over a year ago

can you please fiddle so i can help you

Collectives™ on Stack Overflow

Angular Reactive forms default input value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related