角反应形式 - 用属性结合更改输入值

Question

我已经创建了一个表单上方，上方的包裹选择。该表单包括一个包装输入，该包输入已阅读。我的目的是根据用户选择的软件包通过属性绑定来更改其价值。属性Selected Package（我已经创建的）应显示在输入字段中并更新。

我以前遇到了同样的问题，并以模板驱动的形式遇到了相同的问题。i这种情况是使用[（ngmodel）] =" Selected Package"。

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-forms-everview的角反应性形式然后使用ngoninit（）中的反应性形式的patch（）方法将值设置为formControls。