Question

我创建了一个表格，表格上方有一系列选择的软件包。该表单包括一个只读的包输入。我的意图是根据用户选择的包通过属性绑定更改其值。应该已经在输入字段中显示并更新了属性selectedPackage（我已经创建）。

在使用模板驱动的表单之前，我遇到了同样的问题。在这种情况下，我的解决方案是使用[（ngModel）] =“ selectedPackage”。

HTML：

<form class="w-50 mb-5 mt-5" [formGroup]="contactForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <div class="form-row">
          <div class="col">
            <input type="text" name="name" id="name" class="form-control" placeholder="Name" formControlName="name">
          </div>
          <div class="col">
            <input type="text" name="lastname" id="lastname" class="form-control" placeholder="Future Family Name" formControlName="lastname">
          </div>
        </div>
      </div>
      <div class="form-group">
        <input type="email" name="email" id="email" class="form-control" placeholder="E-Mail" formControlName="email">
      </div>
      <div class="form-group">
        <input type="text" name="package" id="package" placeholder="Please choose a package from the selection above!" class="form-control" formControlName="package" readonly>
      </div>
      <div class="form-group">
        <input type="date" name="date" id="date" class="form-control" formControlName="date">
      </div>
      <div class="form-group">
        <textarea class="form-control" name="text" id="text" rows="4" placeholder="Your message.." formControlName="text"></textarea>
      </div>
      <div class="w-100 d-flex justify-content-center">
        <div class="row">
          <div class="col-12 text-center">
            <span class="alert-info-display-none">Please fill in the required fields above.</span>
          </div>
          <div class="col-12 text-center mt-2">
            <button type="submit">Send</button>
          </div>
        </div>
      </div>
    </form>

打字稿：

@Input() selectedDiv: number;
  selectedPackage: string;
  contactForm: FormGroup;

  onSubmit(): void {
    console.log(this.contactForm);
  }

  changePackageInfo(): void {
    if (this.selectedDiv === 0) {
      this.selectedPackage = '';
    }
    if (this.selectedDiv === 1) {
      this.selectedPackage = 'You\'ve chosen Package One';
    }
    if (this.selectedDiv === 2) {
      this.selectedPackage = 'You\'ve chosen Package Two';
    }
    if (this.selectedDiv === 3) {
      this.selectedPackage = 'You\'ve chosen Package Three';
    }
  }

  public ngOnChanges(changes) {
    if ('selectedDiv' in changes) {
      this.changePackageInfo();
      }
    }

  constructor() { }

  ngOnInit() {
    this.changePackageInfo();

    this.contactForm = new FormGroup({
      name: new FormControl(null),
      lastname: new FormControl(null),
      email: new FormControl(null),
      package: new FormControl(null),
      date: new FormControl(null),
      text: new FormControl(null),
    });
  }

Answer 1

如果我是对的，您想基于@Input（）装饰器更改表单的值。那么您应该使用https://angular.io/guide/forms-overview中的角度反作用形式然后使用ngOnInit（）中反应形式的patch（）方法将值设置为formcontrols。

角反应形式-通过属性绑定更改输入值

1 个答案: