Question

是否可以通过代码在输入文本中插入文本？我有一个必须包含当前值的表单，然后用户将编辑他不满意的那些值。有一个读取实际值的吸气剂，但是如何设置一个呢？

Answer 1

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

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>

打字稿代码..

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(){

  }

}

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

Answer 2

如果我理解您的意思，那么您希望能够从输入和Typescript中更改变量的值，则可以通过两种方式进行绑定。 NG模型允许您执行此操作。

我建议在Angular Tour of Heroes教程中查看本节。

https://angular.io/tutorial/toh-pt1#two-way-binding

在输入文字类型的表单控件中插入文字

2 个答案: