Html 通过按钮以角度填充输入字段

这是我第一次使用Angular，我正在尝试创建一个表单字段，可以通过按钮填充或在其上书写

问题是，当我单击按钮填充de字段，然后单击函数onSubmit中的send按钮时，我只得到了这个.registerForm.value.disp

当我直接在字段上写入并单击“发送”按钮时，this.registerForm.value.disp将正确显示我写入的内容

我不知道这里发生了什么以及如何解决它

这是我的指令

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})
  ....

还有我的指令.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>

更改自动填充1函数

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

---

使用setValue或patchValue

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