2

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

Improve this question
2
  • Can you add html and component of EmailForm. Commented Apr 2, 2018 at 14:31
  • 2
    Actually this EmailForm is just a reference for the ngForm shown in the HTML , it is not a custom component, I will edit it to be clear in the question Commented Apr 2, 2018 at 14:33

3 Answers 3

Reset to default
2

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

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

8 Comments

Actually I want to use the most simple format to do it as you said,however, if I use this way I get the following error: [Angular] Can't bind to 'form' since it isn't a known property of 'app-personal-info'.
Please note that emailForm is only a reference for ngForm inside the component personal-info , so this name is probably only seen inside the same html of the component
@AhmedElkoussy, of course you can't get it. Create in your app-personal-info @Input() form property
ok, I tried it but still can't bind to the inner form of the component I get this error: [Angular] Identifier 'emailForm' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
@AhmedElkoussy, create a StackBlitz code example, I can help you here
|
0

Use as normal assignation not as ngModel

isPersonalInfoValid = email.valid
Improve this answer

6 Comments

You mean inside the same place, right ? like this ? <form #emailForm="ngForm" isPersonalInfoValid="emailForm.valid"> I tried this also , but unfortunately it didn't work
how you are checking the changed value?
The form.valid is automatically assigned based on the validity of the form, I have added more details to the question to make it more clear
Now the problem is : 1- inside the component, I can easily access form.valid but not the component property itself isPersonalInfoValid 2- outside the component, using the selector, I can access isPersonalInfoValid but not the form.valid property
im not getting you.where you are having your form and personal component?
|
0

try emailForm.form.valid 

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

1 Comment

if I use this, the emailForm is not defined, this emailForm is only known inside the the component personal-info

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.