Fill input fields through buttons in Angular

Question

this is my first time working with Angular and I'm trying to create a form field that can be filled through buttons or writing on it.

The problem is that when I click on the buttons to fill de field and then send click on the send button in the function onSubmit() I just get '' in this.registerForm.value.disp

And when I write directly on the field and click on the send button, this.registerForm.value.disp show me correctly what I wrote.

I don't figure out what is happening here and how to fix it.

This is my instruction.component.ts

export class InstructionComponent implements OnInit {

constructor(
private formBuilder: FormBuilder,
private instructionService: InstructionService,
private location: Location) { }

registerForm: FormGroup;
loading = false;

dispPattern = "^DISPOSITIVO[1-4]$";
ngOnInit() {
  this.registerForm = this.formBuilder.group({
  disp: ['',Validators.pattern(this.dispPattern)]
  });
}

onSubmit() {
  var dispInput =  this.registerForm.value.disp 
  console.log(dispInput);
  if (this.registerForm.invalid) {
    console.log('bad');
    return;
  }
  console.log(this.registerForm.value);
  this.instruccionService.create({text: dispInput})
  ....

and my instruction.component.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
    <div class="container-fluid h-100">
        <div class="row">
            <div class="col-3">
               <button class="btn btn-primary btn-block"
                onClick="autoFill1('DISPOSITIVO2'); return false;"
                role="button">Dispositivo 2</button>
               <button class="btn btn-primary btn-block"
                onClick="autoFill1('DISPOSITIVO3'); return false;"        
                role="button">Dispositivo 3</button>

               <div class="form-group">
                <input type="text" formControlName="disp" name="disp" id="disp" class="form-control" placeholder="Elegir dispositivo"  required>
               </div>
            </div>                
        </div>
    </div>
    <input class="btn btn-primary" type="submit" value="Send">    
</form>

and autoFill1() is a script to fill the field

function autoFill1(v1){
     document.getElementById('disp').value = v1;
}

use setValue or patchValue

Chellappan வ
– Chellappan வ

2018-12-01 04:32:57 +00:00
Commented Dec 1, 2018 at 4:32 — Chellappan வ
– Chellappan வ, Commented Dec 1, 2018 at 4:32

Ebin Manuval · Accepted Answer · 2018-12-01 06:56:47Z

1

change your autoFill1() function

function autoFill1(v1){
     this.registerForm.get("dept").setValue(v1);
}

answered Dec 1, 2018 at 6:56

Ebin Manuval

1,25514 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Fill input fields through buttons in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related