Question

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

问题是，当我单击按钮以填充de字段并发送时，单击onSubmit（）函数中的发送按钮时，我在this.registerForm.value.disp中只是得到了

当我直接在字段上书写并单击发送按钮时，this.registerForm.value.disp正确地向我显示了我写的内容。

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

这是我的指示。component.ts

spec_helper

和我的struction.component.html

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

和autoFill1（）是用于填充字段的脚本

<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>

Answer 1

更改您的autoFill1()函数

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

通过Angular中的按钮填充输入字段

1 个答案: