How to make form Model in separate function(declaration,FormGroup and FromControl)-CodePudding

How to make form Model in separate function(declaration,FormGroup and FromControl) and call it in ngOnInit. Please help i am learning angular currently this are the basics I am working on.

export class AppComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('Sammy'),
      email: new FormControl(''),
      message: new FormControl('')
    });
  }

Wanted the this.myForm part in separate function and the how to call it.

CodePudding user response：

You can create a function

messageForm(data:any=null)
{
    data={name:'',email:'',message:'',...data}
    return new FormGroup({
      name: new FormControl(data.name),
      email: new FormControl(data.email),
      message: new FormControl(data.message)
    });
}

//and use
myForm:FormGroup=this.messageForm({name:'sammy'})

If you want, this function can be "outside" the Component, simply create as function and mark as export to allow import using import {messageForm} from '...'

export function messageForm(data:any=null){
   ...
}

And use

myForm:FormGroup=messageForm({name:'sammy'})

You can also create a Class

export class MessageForm {
  form:FormGroup
  constructor(data: any = null) {
    data = { name: '', email: '', message: '', ...data };
    this.form= new FormGroup({
      name: new FormControl(data.name),
      email: new FormControl(data.email),
      message: new FormControl(data.message),
    });
  }
  get value(){
    return this.form.value
  }
  get controls()
  {
    return this.form.controls
  }
  get(path:string)
  {
    return this.form.get(path) as FormControl
  }
  setValue(path:string,value:any)
  {
    this.form.get(path).setValue(value)
  }
}

And you can use

myForm = new MessageForm({ name: 'Sammy' });

<form [formGroup]="myForm.form">
  <input formControlName="name"/>
  <input formControlName="email"/>
  <input formControlName="message"/>
</form>

stackblitz

CodePudding user response：

You just create a separate function called initializeForm then call it inside ngOnInit. Like so.

export class AppComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
     this.initializeForm();
  }

  initializeForm() {
    this.myForm = new FormGroup({
      name: new FormControl('Sammy'),
      email: new FormControl(''),
      message: new FormControl('')
    });
  }
}

Note: declaration cannot be inside the functions, instead you can create a separate class and inherit the function and properties like so.

form class

export class FormClass {
  myForm: FormGroup;

  initializeForm() {
    this.myForm = new FormGroup({
      name: new FormControl('Sammy'),
      email: new FormControl(''),
      message: new FormControl('')
    });
  }
}

main component

export class AppComponent extends FormClass implements OnInit {

  constructor() {
      super(); // <- very important to call when you inherit
  }

  ngOnInit() {
     this.initializeForm();
  }
}

Html

<form [formGroup]="myForm">

  <label for="first-name">Name: </label>
  <input id="name" type="text" formControlName="name">

  <label for="email">Last Name: </label>
  <input id="email" type="text" formControlName="email">

  <label for="message">Last Name: </label>
  <input id="message" type="text" formControlName="message">
</form>

Honestly it's best you read the angular reactive form documentation