Angular Reactive Form - change input value with property binding

Question

I've created a form with a selection of packages above the form. The form includes a package input which is readonly. My intention is to change its value via property binding according to what package the user has selected. The property selectedPackage (which I already created) shall be displayed in the input field and updated.

I've had the same problem before with a template driven form. I this case the solution was to use [(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>

Typescript:

@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),
    });
  }

Archit Goel · Accepted Answer · 2019-03-16 12:34:39Z

1

If I am correct you want to change values of the form based on @Input() decorator. then you should use angular reactive forms from https://angular.io/guide/forms-overview and then use the patch() method of reactive forms in ngOnInit() to set values to the formcontrols.

answered Mar 16, 2019 at 12:34

Archit Goel

571 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11204114 Over a year ago

Thanks for the answer! I've tried to add: this.contactForm.patchValue({ package: this.selectedPackage }); But the input remains empty and no value is being fetched on submit.

Archit Goel Over a year ago

how are u fetching the value. this.contactForm.value is correct way & initialize the form controls before the ngOnInit() method where u are declaring the variable for control. then patch the values in ngOnInit().

Collectives™ on Stack Overflow

Angular Reactive Form - change input value with property binding

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related