Angular 在输入文本类型的窗体控件中插入文本

Angular 在输入文本类型的窗体控件中插入文本,angular,typescript,Angular,Typescript,有没有办法在代码的输入文本中插入文本?我有一个表单,它必须包含当前值,然后用户将编辑他发现的值。有一个getter可以读取实际值,但是设置一个如何?如果我理解您的意思,您希望能够从输入和键入脚本中更改变量的值,您可以通过双向绑定来实现这一点。NG模型允许您这样做 我建议在Heros教程的Angular Tour中查看这一部分 请参考以下解决方案并修改您的代码 HTML代码 <form *ngIf="formObject" [formGroup]="demoForm" (submit)="o

有没有办法在代码的输入文本中插入文本?我有一个表单,它必须包含当前值,然后用户将编辑他发现的值。有一个getter可以读取实际值,但是设置一个如何?

如果我理解您的意思,您希望能够从输入和键入脚本中更改变量的值,您可以通过双向绑定来实现这一点。NG模型允许您这样做

我建议在Heros教程的Angular Tour中查看这一部分


请参考以下解决方案并修改您的代码

HTML代码

<form *ngIf="formObject" [formGroup]="demoForm" (submit)="onFormSubmit()">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" formControlName="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" formControlName="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" formControlName="address" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" formControlName="address2" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" formControlName="city" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control" formControlName="state">
        <option selected>Choose...</option>
        <option value="maharashtra">Maharashtra</option>
        <option value="delhi">Delhi</option>
        <option value="karnataka">Karnataka</option>
        <option value="gujrat">Gujrat</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" formControlName="zip" class="form-control" id="inputZip">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

请不要忘记在App.module.ts中导入FormsModule、ReactiveFormsModule

getter是什么样子的?比如FormControlName.Value阅读关于双向绑定的内容@StephaneM谢谢如果您有FromControl参考,那么您应该能够执行
formControl.setValue('something')
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {
  demoForm: FormGroup;

  formObject = {
    email: 'email@gmail.com',
    password: 'password',
    address: 'address 1 here',
    address2: 'address 2 here',
    city: 'pune',
    state: 'maharashtra',
    zip: '412411'
  };  

  constructor(
    private formBuilder: FormBuilder,
  ) {
    this.createDemoForm(this.formObject);
  }

  ngOnInit() {

  }

  createDemoForm(formObj) {
    this.demoForm = this.formBuilder.group({
      email: [formObj.email, Validators.required],
      password: [formObj.password, Validators.required],
      address: [formObj.address, Validators.required],
      address2: [formObj.address2, Validators.required],
      city: [formObj.city, Validators.required],
      state: [formObj.state, Validators.required],
      zip: [formObj.zip, Validators.required]
    });
  }

  onFormSubmit(){

  }

}