CODEWITHSUNDEEP
angulardata-bindingangular5
Ahmed Elkoussy
Ahmed Elkoussy

Reputation: 8568

Angular 5 property binding from within the component html for the same component

I am using the property isPersonalInfoValid as a flag for a wizard component

I want the emailform.valid (emailForm is just a reference to the ngForm shown in the html below) to update the component property [isPersonalInfoValid], I tried many ways but none worked, currently this [(isPersonalInfoValid)] is treated as a property of the emailForm which is wrong, I want to use it as a property of personal-info component.

The code below is from the personal-info.component.html

<form #emailForm="ngForm" [(isPersonalInfoValid)]="emailForm.valid">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"
      [(ngModel)]="data.email" required email>

The code of personal-info.component.ts is as follows:

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { FormWizardModule } from 'angular2-wizard';

@Component({
  selector: 'app-personal-info',
  templateUrl: './personal-info.component.html',
  styleUrls: ['./personal-info.component.css'],
  // encapsulation: ViewEncapsulation.None
})
export class PersonalInfoComponent implements OnInit {

  @Input() isPersonalInfoValid = false;
  data: any = {
    email: '[email protected]'
  };
  constructor() { }

  ngOnInit() {
  }

  onStep1Next(event) {
    console.log('Step1 - Next');
  }

  onStepChanged(step) {
    console.log('Changed to ' + step.title);
}

}

Your help is appreciated, thanks

Edit:

I can bind the property only if I am using the component selector (in another component) but then I can't access the form.valid property , like this

<app-personal-info #personalInfo  [isPersonalInfoValid]="emailForm.valid ></app-personal-info>

I need to make the binding so that the form.valid changes the property isPersonalInfoValid

Edit 2:

The code is here

Upvotes: 2

Views: 1896

Answers (3)

Yerkon
Yerkon

Reputation: 4788

No need to create another variable to check validity of the form. Get access to form where you need. In your case parent need to get access of form in the child component. It can be solved in two ways by official documentations:

  1. Little More Code. You can access to child components by injecting them into the parent as a ViewChild. Read more: Parent calls an @ViewChild()
  2. Simple and Easy way. If you want to access child only in parent component template, use local variables(#var). Read more: Parent interacts with child via local variable

For you case I already @ViewChild approach. It gives you full access to child component, but also little more code than second approach using local variables.

ViewChild Decorator. Official doc.

Get access to child PersonalInfoComponent component in parent WizardComponent:

 ...
 @ViewChild(PersonalInfoComponent)
  private personalInfo: PersonalInfoComponent;
 ...

In child PersonalInfoComponent get access to emailForm similarly as above:

@ViewChild('emailForm') emailForm: NgForm

Then, in parent WizardComponent you can get emailForm throw PersonalInfoComponent child component. And pass it to wizard-step component as this personalInfo.emailForm.valid

WizardComponent.html:

  ...
  <wizard-step [title]="'Personal Information'" [isValid]="personalInfo.emailForm.valid" (onNext)="onStep1Next($event)">
          <app-personal-info #personalInfo></app-personal-info>

  </wizard-step>
  ...

StackBlitz EXAMPLE

Upvotes: 2

Fateh Mohamed
Fateh Mohamed

Reputation: 21357

try emailForm.form.valid 

<app-personal-info #personalInfo  [isPersonalInfoValid]="emailForm.form.valid ></app-personal-info>

Upvotes: 0

Stark Buttowski
Stark Buttowski

Reputation: 1849

Use as normal assignation not as ngModel

isPersonalInfoValid = email.valid

Upvotes: 0

Related Questions