Angular - Two-way Binding - Live Form #19

akash-coded · 2022-07-27T11:23:57Z

akash-coded
Jul 27, 2022
Maintainer

Replicate the behavior of the form on this website.

The following are the requirements to be met:

When you update the artifact field, the name and the package field should also be updated. The package name has a prefix of "com.example".
When you update the name field, no other field will be changed.
When you update the package field, the name and the artifact field should also be changed matching the last segment of the package name.
When you click on the "Done" button, it should log all the entered details to the console as a JSON object.
If you leave the artifact or the name empty, and click out or try to submit the form, it should show an alert with "Please fill all the required fields".

Kuntapaliwal · 2022-07-28T03:54:18Z

Kuntapaliwal
Jul 28, 2022

form.component.html

<h2 id="heading">Project Metadata</h2>

<form action="metadatavalues">
    <div id="groupId" name="groupIdField" class="form-group">
        <label for="group">Group</label><br />
        <input type="email" id="groupId" name="email" class="form-control" placeholder="abc@xyz.com" autofocus
            required />
    </div>
    <div id="artifact" name="artifactIdField" class="form-group">
        <label for="artifactId">Artifact</label><br />
        <input type="text" id="artifact" name="artifact" class="form-control" placeholder="abc@xyz.com"
            [(ngModel)]="artifact" value="{{package.substr(12)}}" />
    </div>
    <div id="name" name="name" class="form-group">
        <label for="name">Name</label><br />
        <input type="text" id="nameIdInput" name="nameInput" class="form-control" placeholder="abc@xyz.com" autofocus
            value="{{artifact}}" value="{{package.substr(12)}}" [(ngModel)]="name" />
    </div>
    <div id=" description" name="description" class="form-group">
        <label for="description">Description</label><br />
        <input type="text" id="descriptionInput" name="descriptionInput" class="form-control" placeholder="abc@xyz.com"
            autofocus required />
    </div>
    <div id="packagefield" name="packagefield" class="form-group">
        <label for="package">Package</label><br />
        <input type="email" id="package" name="package" class="form-control" [(ngModel)]="package"
            placeholder="abc@xyz.com" autofocus required value="com.example.{{artifact}} " (keyup)="updateData()" />
    </div>
    <button type=" submit" class="btn btn-primary" (click)="SaveData()">Done</button>

</form>

form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form-two-way',
  templateUrl: './form-two-way.component.html',
  styleUrls: ['./form-two-way.component.css']
})
export class FormTwoWayComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  group:string="";
  artifact:string="";
  name:string="";
  description:string="";
  package:string="com.example.";

public updateData()
{
  this.artifact=this.package.substring(12);
  this.name=this.artifact;
}

  public SaveData()
  {
    if(this.artifact.length <= 0 && this.name.length <=0)
    {
      alert("please fill the artifactId and name it is must have field");
    }
    else
    console.log(`artifact:${this.artifact}\n name:${this.name}\ndescription${this.description}\npackage${this.package}\nGroup${this.group}`);
  }

}

0 replies

gayatribabar · 2022-07-28T04:35:14Z

gayatribabar
Jul 28, 2022

app.component.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .content {
        max-width: 500px;
        margin: auto;
      }
    </style>
  </head>
  <body class="content">
    <h2>Group Metadata</h2>
    <form>
      <label>Group</label><br />
      <input name="firstname" type="text" [(ngModel)]="group" /><br />
      <label>Artifact</label><br />
      <input name="a" type="text" [(ngModel)]="artifact" /><br />
      <label>Name</label><br />
      <input name="name" type="text" value="{{ artifact }}" /><br />
      <label>Description</label><br />
      <input name="description" type="text" [(ngModel)]="description" /><br />
      <label>Package Name</label><br />
      <input name="b" type="text" [(ngModel)]="package"
        value="com.example.{{ artifact }}"
        (keyup)="updateData()" /><br />
      <button (click)="Done()">Done</button>
    </form>
  </body>
</html>

app.component.ts

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  artifact: string="";
  group: string = "";
  description ="";
  inside = false;

   public updateData()
{
  this.artifact=this.package.substring(12);
}

  Done()
  {
    if(this.artifact=="")
    {
      alert("Please fill all the required fields");
    }
    else
    {
      console.log("group: " + this.group+ "  artifact: " + this.artifact+ "  name: " + this.artifact+"  description: " + this.description+"  Package: " + "com.example."+this.artifact);
    }
  }
  
  constructor() { }
  ngOnInit(): void {
  }
  
}

0 replies

vshvandana · 2022-07-28T04:58:36Z

vshvandana
Jul 28, 2022

page.component.ts

import { Component, OnInit } from '@angular/core';
import { ConnectableObservable } from 'rxjs';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {

  group: string = ""
  name: string = "";
  title: string = "";
  description: string = "";
  package: string = "com.example."


  OnClick() {
    if ((this.title.length == 0 || this.name.length == 0)) {
      alert("Please fill all the required fields");
    }
    else {
      console.log(this.group, this.name, this.title, this.description, this.package);
    }

  }



  constructor() { }

  ngOnInit(): void {
  }

}

page.html

<h2>Project Metadata</h2>
<br>
<div class="mx-2">
    <form>
        <label for="group">Group </label>
        <input class="ml-4" type="text" name="group1" [(ngModel)]="group"><br><br>

        <label for="artifact">Artifact </label>
        <input class="ml-3" type="text" name="artifact1" id="artifact" [(ngModel)]="title" value="{{title}}"
            value={{package.substring(12)}}><br><br>

        <label for="name">Name</label>
        <input class="ml-4" type="text" name="name1" id="name" value="{{title}}" value={{package.substring(12)}}>
        <br><br>

        <label for="description">Description </label>
        <input class="ml-5" type="text" id="desc" name="description" [(ngModel)]="description"><br><br>

        <label for="packagename">Package Name</label>
        <input class="ml-4" type="text" id="packagename" value="com.example.{{title}}" [(ngModel)]="package"
            name="package"><br><br>

        <button class="btn btn-primary " type="submit" value="Done" (click)="OnClick()">Done</button>
    </form>
</div>

0 replies

meghvi-raj · 2022-07-28T05:00:55Z

meghvi-raj
Jul 28, 2022

APP.COMPONENT.HTML

<h2>Project Metadata</h2>

<br />

<div class="mx-2">
  <form>
    <label for="group">Group </label>

    <input
      class="ml-4"
      type="text"
      name="group"
      [(ngModel)]="group"
    /><br /><br />

    <label for="artifact">Artifact </label>

    <input
      class="ml-3"
      type="text"
      name="artifact"
      id="artifact"
      [(ngModel)]="title"
      value="{{ title }}"
      value="{{ package.substr(12) }}"
    /><br /><br />

    <label for="name">Name</label>

    <input
      class="ml-4"
      type="text"
      name="name"
      id="name"
      value="{{ title }}"
      value="{{ package.substr(12) }}"
    />

    <br /><br />

    <label for="description">Description </label>

    <input
      class="ml-5"
      type="text"
      name="description"
      id="desc"
      [(ngModel)]="desc"
    /><br /><br />

    <label for="packagename">Package Name</label>

    <input
      class="ml-4"
      type="text"
      name="packagename"
      id="packagename"
      [(ngModel)]="package"
      value="com.example.{{ title }}"
    /><br /><br />
    <button type="submit" class="btn btn-primary" (click)="SaveData()">
      Done
    </button>
  </form>
</div>

APP.COMPONENT.TS

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:string = '';
  package:string = '';
 name:string="";
 desc:string="";
  group:string="";
  artifact:string="";

  public SaveData()
  {
    if(this.title.length >0) 
    {
      console.log("Artifact: "+this.title + " Name:"+this.title +"Packege: com.example."+this.title,"Group: "+this.group);
    }
    else {
      alert("ARTIFACT AND NAME ARE MANDATORY FIELDS");
    }
   
    
  }

 
}

SCREENSHOT

0 replies

Coder-093 · 2022-07-28T05:27:22Z

Coder-093
Jul 28, 2022

app.component.ts

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  artifact: string="";
  group: string = "";
  description ="";
  inside = false;
  title = 'replica';

  Done()
  {
    if(this.artifact=="")
    {
      alert("Please fill all the required fields");
    }
    else
    {
      console.log("group: " + this.group+ "  artifact: " + this.artifact+ "  name: " + this.artifact+"  description: " + this.description+"  Package: " + this.group+this.artifact);
    }
  }
  
  constructor() { }
  ngOnInit(): void {
  }
  
}

app.component.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .content {
        max-width: 500px;
        margin: auto;
      }
    </style>
  </head>
  <body class="content">
    <h2>Project Metadata</h2>
    <form>
      <div class="form-group">
        <label>Group</label><br />
        <input name="groupname" type="text" [(ngModel)]="group" /><br />
      </div>
      <div class="form-group">
        <label>Artifact</label><br />
        <input name="arti" type="text" [(ngModel)]="artifact" /><br />
      </div>
      <div class="form-group">
        <label>Name</label><br />
        <input name="name" type="text" value="{{ artifact }}" /><br />
      </div>
      <div class="form-group">
        <label>Description</label><br />
        <input name="description" type="text" [(ngModel)]="description" /><br />
      </div>
      <div class="form-group">
        <label>Package Name</label><br />
        <input name="pn" type="text" value="{{ group }}.{{ artifact }}" /><br />
      </div>
      <button (click)="Done()" class="btn btn-primary">Done</button>
    </form>
  </body>
</html>

0 replies

ghost · 2022-07-28T05:31:52Z

ghost
Jul 28, 2022

d19.component.ts

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .content {
        max-width: 800px;
        margin: auto;
      }
    </style>
  </head>
  <body class="content">
    <h2>Project Metadata</h2>
    <form>
      <label>Group</label><br />
      <input name="firstname" type="text" [(ngModel)]="group" /><br />
      <label>Artifact</label><br />
      <input name="a" type="text" [(ngModel)]="artifact" /><br />
      <label>Name</label><br />
      <input name="name" type="text" value="{{ artifact }}" /><br />
      <label>Description</label><br />
      <input name="description" type="text" [(ngModel)]="description" /><br />
      <label>Package</label><br />
      <input name="b" type="text" value="com.example.{{ artifact }}" /><br /><br />
      <button type=" submit" class="btn btn-secondary" (click)="Details()">Done</button>
    </form>
  </body>
</html>

d19.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-d19',
  templateUrl: './d19.component.html',
  styleUrls: ['./d19.component.css']
})
export class D19Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  group:string="";
  artifact:string="";
  name:string="";
  description:string="";
  package:string=".com.example";

public updateData()
{
  this.artifact=this.package.substring(20);
  this.name=this.artifact;
}

  public Details()
  {
    if(this.artifact.length <= 0 && this.name.length <=0)
    {
      alert("Please enter Name and ArtifactId");
    }
    else
    console.log(`artifact:${this.artifact}\n name:${this.name}\ndescription${this.description}\npackage${this.package}\nGroup${this.group}`);
  }
}

##screenshot

0 replies

ghost · 2022-07-28T06:10:01Z

ghost
Jul 28, 2022

app.component.html

<h2>Project Metadata</h2>
<form>
  <div>
    <label>Group</label>
    <input name="name" type="text" [(ngModel)]="name" /><br />
  </div>
  <br />
  <div>
    <label>Artifact</label>
    <input name="artifact" type="text" [(ngModel)]="artifact" required />
  </div>
  <br />

  <div>
    <label>Name</label>
    <input name="name" type="text" value="{{ artifact }}" required />
  </div>
  <br />
  <div>
    <label>Description</label>
    <input name="description" type="text" [(ngModel)]="description" /><br />
  </div>
  <br />
  <div>
    <label>Package Name</label>
    <input name="package" type="text" value="{{ text }}.{{ artifact }}" /><br />
  </div>
  <br />
  <button (click)="Submit()" class="btn btn-primary">Submit</button>
</form>

app.component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'twowaybinding';

   constructor() { }

  ngOnInit(): void {
  }
  artifact: string="";
  name: string = "";
  description:string ="";
  inside = false;
  text:string="com.example"
 

  Submit()
  {
    if(this.artifact==""||this.name=="")
    {
      alert("Artificat and name are the required fields");
    }
    else
    {
      document.writeln("Group: " + this.name+ "  artifact: " + this.artifact+ "  name: " + this.artifact+"  description: " + this.description+"  Package: " + this.name+this.artifact);
    }
  }
}

0 replies

uzma23 · 2022-07-28T06:10:21Z

uzma23
Jul 28, 2022

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  artifact: string="";
  name: string ="";
  group: string = "";
  description: string ="";
  package: string ="";
  package1: string ="com.example.";

  Done()
  {
    if(this.artifact=="" || this.artifact==""  )
    {
      alert("Please fill all the required fields");
    }
    else
    {
      console.log("group: " + this.group+ "  artifact: " + this.artifact+ "  name: " + this.artifact+"  description: " + this.description+"  Package: " + "com.example."+this.artifact);
    }
  }

  public updateData()
{
  this.name=this.artifact;
  
  this.package = `com.example.{{this.artifact}}`;
}

  
  constructor() { }
  ngOnInit(): void {
  }
}

###app.component.html

<h2 id="heading">Project Metadata</h2>

<form>
  <label>Group</label><br />
  <input name="firstname" type="text" [(ngModel)]="group" /><br />

  <label>Artifact</label><br />
  <input
    name="a"
    type="text"
    [(ngModel)]="artifact"
    (keydown)="updateData()"
  /><br />

  <label>Name</label><br />
  <input
    name="name"
    type="text"
    value="{{ artifact }}"
    value="{{ package.substr(12) }}"
    [(ngModel)]="name"
  /><br />

  <h1>{{ name }}</h1>

  <label>Description</label><br />
  <input name="description" type="text" [(ngModel)]="description" /><br />

  <label>Package Name</label><br />
  <input
    name="b"
    type="text"
    value="com.example.{{ artifact }}"
    [(ngModel)]="package"
  /><br />

  <button (click)="Done()">Done</button>
</form>
<p>{{ artifact }}</p>
<p>{{ name }}</p>
<p>{{ group }}</p>
<p>{{ description }}</p>
<p>{{ package }}</p>

screenshot

0 replies

nidhineapen · 2022-10-02T04:27:56Z

nidhineapen
Oct 2, 2022

Code****

<div class="container">
    <h2 id="heading">Project Metadata</h2>

    <form action="metadatavalues">
        <div class="form-group">
            <label for="group">Group</label><br />
            <input type="text" id="groupId" name="group" class="form-control" placeholder="Enter Group Name" [(ngModel)]="group" />
        </div>
        <div class="form-group">
            <label for="artifactId">Artifact</label><br />
            <input type="text" id="artifact" name="artifact" class="form-control" placeholder="Enter Artifact" [(ngModel)]="artifact"/>
        </div>
        <div class="form-group">
            <label for="name">Name</label><br />
            <input type="text" id="nameIdInput" name="nameInput" class="form-control" placeholder="Enter Name" value="{{artifact}}" [(ngModel)]="name" />
        </div>
        <div class="form-group">
            <label for="description">Description</label><br />
            <input type="text" id="descriptionInput" name="descriptionInput" class="form-control" placeholder="Enter Description"/>
        </div>
        <div class="form-group">
            <label for="package">Package</label><br />
            <input type="text" id="package" name="package" class="form-control" [(ngModel)]="package" placeholder="Enter Package" value="{{group}}.{{artifact}}" />
        </div>
    </form>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-data-entry',
  templateUrl: './data-entry.component.html',
  styleUrls: ['./data-entry.component.css']
})
export class DataEntryComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  group:string="";
  artifact:string="";
  name:string="";
  description:string="";
  email:string="";
  package:string="";

public updateData()
{
  this.artifact=this.package.substring(12);
  this.name=this.artifact;
}
}

0 replies

prabhosle · 2022-10-02T05:21:37Z

prabhosle
Oct 2, 2022

<div class="container" style="margin-top: 20px;">
  <div class="row">
      <div class="col-md-6 offset-md-3">
          <h2>Registration Form</h2>
          <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
              <div class="form-group">
                  <label>Group</label>
                  <input type="text" formControlName="group" class="form-control"
                  [ngClass]="{'is-invalid':submitted && f['group'].errors}"/>

                  <div *ngIf="submitted && f['group'].errors " class="invalid-feedback">
                      <div *ngIf="f['group'].errors['required'] ">
                          Group can be Empty
                      </div>
                  </div>
              </div>
              <div class="form-group">
                  <label> Name</label>
                  <input type="text" formControlName="Name" class="form-control"
                  [ngClass]="{'is-invalid':submitted && f['Name'].errors}"/>

                  <div *ngIf="submitted && f['Name'].errors " class="invalid-feedback">
                      <div *ngIf="f['Name'].errors['required'] ">
                          Name can be Empty
                      </div>
                  </div>
              </div>
              <div class="form-group">
                  <label>Email Id</label>
                  <input type="text" formControlName="email" class="form-control"
                  [ngClass]="{'is-invalid':submitted && f['email'].errors}"/>

                  <div *ngIf="submitted && f['email'].errors " class="invalid-feedback">
                      <div *ngIf="f['email'].errors['required'] ">
                          Email can be Empty
                      </div>
                      <div *ngIf="f['email'].errors['email'] ">
                          Enter Valid Email Address
                      </div>
                  </div>
              </div>
              <div class="form-group">
                  <label>Password</label>
                  <input type="password" formControlName="password" class="form-control"
                  [ngClass]="{'is-invalid':submitted && f['password'].errors}"/>

                  <div *ngIf="submitted && f['password'].errors " class="invalid-feedback">
                      <div *ngIf="f['password'].errors['required'] ">
                          Password can be Empty
                      </div>
                      <div *ngIf="f['password'].errors['minlength'] ">
                          Password must be 8 characters long
                      </div>
                  </div>
              </div>
              <div class="form-group">
                  <button class="btn btn-primary" >Register</button>
              </div>
          </form>
      </div>
  </div>
</div>

//app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'form';
  registerForm!: FormGroup;
  submitted:boolean=false;
  constructor(private builder:FormBuilder) { }

  ngOnInit(): void {
    this.registerForm=this.builder.group({
      group:["",Validators.required],
      Name:["",Validators.required],
      email:["",[Validators.required,Validators.email]],
      password:["",[Validators.required,Validators.minLength(8)]]
    })
  }
  get f(){
    return this.registerForm.controls;
  }

  onSubmit(){
    this.submitted=true;
    if(this.registerForm.invalid)
      return;
    alert("Your form is submitted for approval")
  }
}

0 replies

PurnaPichuka · 2022-10-14T10:40:11Z

PurnaPichuka
Oct 14, 2022

.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap_Form_A</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container col-md-5 col-lg-6">
      <form
        action="#"
        method="GET"
        class="container font-weight-bold mx-auto text-light"
      >
        <div class="container bg-dark my-4">
          <div class="text-light text-center">
            <h1 class="font-weight-bold">Project Metadata</h1>
          </div>

          <!-- Group -->
          <section class="form-group">
            <label for="number1">Group:</label>
            <input
              type="text"
              name="group"
              id="group"
              class="form-control"
              placeholder="enter a group value"
              autocomplete="off"
              [(ngModel)]="group"
            />
          </section>
          <!-- Artifact -->
          <section class="form-group">
            <label for="number1">Artifact:</label>
            <input
              type="text"
              name="artifact"
              id="artifact"
              class="form-control"
              placeholder="enter a artifact"
              autocomplete="off"
              [(ngModel)]="artifact"
            />
          </section>
          <!-- Name -->
          <section class="form-group">
            <label for="number1">Name:</label>
            <input
              type="text"
              name="name"
              id="name"
              class="form-control"
              placeholder="enter a name"
              autocomplete="off"
              value="{{ artifact }}"
            />
          </section>
          <!-- Description -->
          <section class="form-group">
            <label for="number1">Description:</label>
            <input
              type="text"
              name="description"
              id="description"
              class="form-control"
              placeholder="enter a description"
              autocomplete="off"
              [(ngModel)]="desc"
            />
          </section>
          <!-- Package Name-->
          <section class="form-group">
            <label for="number1" class="text-justify">Package Name:</label>
            <input
              type="text"
              name="packagename"
              id="packagename"
              class="form-control"
              placeholder="enter a package name"
              autocomplete="off"
              [(ngModel)]="package"
              value="com.example.{{ artifact }}"
              (keyup)="updateData()"
            />
          </section>
          <!-- Done -->
          <section class="form-group mx-auto">
            <input
              type="button"
              class="btn btn-block bg-primary text-uppercase text-light font-weight-bold"
              value="Done"
              (click)="jsonData()"
            />
          </section>
          <br />
        </div>
      </form>
    </div>
  </body>
</html>

.ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-two-way-binding-live-form',
  templateUrl: './two-way-binding-live-form.component.html',
  styleUrls: ['./two-way-binding-live-form.component.css']
})
export class TwoWayBindingLiveFormComponent implements OnInit {

  public group:string="";
  public artifact:string="";
  public desc:string="";
  public package:string="";

  public updateData()
{
  this.artifact=this.package.substring(12);
}

  jsonData(){
    if(this.artifact.length == " ")
    {
      alert("artifactId is must have field");
    }
    else{
    console.log(`{ \n"Group":"${this.group}"\n 
    \n "Artifact":"${this.artifact}"\n 
    \n "Name":"${this.artifact}"\n
    \n "Description":"${this.desc}"\n
    \n "Package":"com.example.${this.artifact}"\n }
    `);
    }
  }

  constructor() { }

  ngOnInit(): void {
  }

}

0 replies

rrajbanshi · 2022-10-14T11:04:22Z

rrajbanshi
Oct 14, 2022

html

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-5 col-lg-6">
     <h1 class="text-center mb-5">Package Initializer</h1>
  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Group</div>
      </div>
      <input name="group" class="form-control" type="text" [(ngModel)]="group" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Artifact</div>
      </div>
      <input name="artifact" type="text"  class="form-control" [(ngModel)]="artifact" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Name</div>
      </div>
      <input name="demo" type="text" class="form-control" value="{{ artifact }}" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Description</div>
      </div>
      <input name="description" type="text"  class="form-control" [(ngModel)]="description" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Package Name</div>
      </div>
      <input name="package" type="text" class="form-control" [(ngModel)]="package"
         value="com.example.{{ artifact }}"
      (keyup)="updateData()" />
    </div>
  </form>
  </div>
  </div>
 </div>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-package-initializer',
  templateUrl: './package-initializer.component.html',
  styleUrls: ['./package-initializer.component.css']
})
export class PackageInitializerComponent implements OnInit {


  group : string = ''
  artifact : string = ''
  description : string =  ''
  name : string = ''
  package : string = 'com.example.'


  public updateData()
   {
    this.artifact = this.package.substring(12);
    }
  
    public SaveData(){
      if(this.artifact.length <= 0 && this.name.length <=0)
    {
      alert("please fill the artifactId and name it is must have field");
    }
    else
    {
      this.name = this.artifact;
      console.log(`artifact:${this.artifact}\n name:${this.name}\ndescription:${this.description}\npackage:${this.package}\nGroup${this.group}`);
    }
    }
  constructor() { }

  ngOnInit(): void {
  }

}

css

.input-group-text{
    width: 120px;
}

0 replies

NavneetBais · 2022-10-14T11:45:48Z

NavneetBais
Oct 14, 2022

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-two-way-binding',
  templateUrl: './two-way-binding.component.html',
  styleUrls: ['./two-way-binding.component.css']
})
export class TwoWayBindingComponent implements OnInit {
  public name : string = "";
  public group : string = "";
  public artifact : string ="" ; 
  public package : string = "com.example." ;

  constructor() { }
  
  ngOnInit(): void {
  }
  onClick(){

    this.name += this.artifact;
  
   
    
    if(this.package === "" || this.artifact === "" || this.name === ""){
      alert("Kindly Fill all details");
    }else{
      let u = {
        name : this.name ,
        group : this.group,
        artifact : this.artifact,
        package : this.package
      }
      console.log(u)
    }
  }
 
}

html

<div class="col-lg-4 offset-4" style="margin-top: 10rem ;">
    <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Group</span>
        </div>
        <input type="text" class="form-control"
        [(ngModel)] = "group" 
        aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
      </div>
      
      <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Artifact</span>
        </div>
        <input type="text"  [(ngModel)] = "artifact" value="{{package.substring(12)}}" class="form-control"  aria-label="Small" aria-describedby="inputGroup-sizing-sm">
      </div>
      <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" #name id="inputGroup-sizing-sm">Name</span>
        </div>
        <input type="text"  value="{{artifact}}{{package.substring(12)}}" class="form-control" id="name" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
      </div>
      <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Description</span>
        </div>
        <input type="text"  class="form-control" id="description" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
      </div>
      <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Package Name</span>
        </div>
        <input type="text" [(ngModel)]="package" value="com.example.{{artifact}}" class="form-control" id="package" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
     
    </div>
    <div class="text-center">
        <button class="btn btn-primary  btn-sm" (click)="onClick()">Done</button>
    </div>
    
</div>

Output

0 replies

AbhishekBilagi · 2022-10-14T12:20:05Z

AbhishekBilagi
Oct 14, 2022

<p>two-way-binding works!</p>
<div class="container">
 <h6>Group</h6>
 <input class="form-control"  type="text"placeholder="Enter Group" [(ngModel)]="group">
 <h6>Artifact</h6>
 <input class="form-control"  type="text"placeholder="Enter Artifact" [(ngModel)]="artifact" >
   <h6>Name</h6>
  <input class="form-control"  type="text"placeholder="Enter Name" value="{{artifact}}" >
 <h6>Discription</h6>
  <input class="form-control"  type="text"placeholder="Enter Discription" [(ngModel)]="desc">
  <h6>Package Name</h6>
   <input class="form-control"  type="text"placeholder="Enter Package Name" 
   [(ngModel)]="pkgName" value="com.example.{{artifact}}" (keyup)="updateData()"><br>
<input class="btn btn-primary form-control"  type="button" value="Submit" (click)="jsonData()">
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-two-way-binding',
  templateUrl: './two-way-binding.component.html',
  styleUrls: ['./two-way-binding.component.css']
})
export class TwoWayBindingComponent implements OnInit {

  group:string = "";
  artifact:string="";
  desc:string = "";
  pkgName:string="";

  public updateData()
  {
    this.artifact=this.pkgName.substring(12);
  }

  jsonData(){
    if(this.artifact === "" ){
        alert("artifact is mandatory")
    }
    else{
      console.log(`{
        "Group":${this.group}
        "Artifact":${this.artifact}
        "Name":${this.artifact}
        "Description":${this.desc}
        "Package":com.example.${this.artifact}
      }
    `)
     
    }
    
    
  }
  

  constructor() { }

  ngOnInit(): void {
  }
  
}

0 replies

lingamurthi · 2022-10-14T14:06:48Z

lingamurthi
Oct 14, 2022

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-5 col-lg-6">
     <h1 class="text-center mb-5">Package Initializer</h1>
  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Group</div>
      </div>
      <input name="group" class="form-control" type="text" [(ngModel)]="group" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Artifact</div>
      </div>
      <input name="artifact" type="text"  class="form-control" [(ngModel)]="artifact" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Name</div>
      </div>
      <input name="demo" type="text" class="form-control" value="{{ artifact }}" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Description</div>
      </div>
      <input name="description" type="text"  class="form-control" [(ngModel)]="description" />
    </div>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">Package Name</div>
      </div>
      <input name="package" type="text" class="form-control" [(ngModel)]="package"
         value="com.example.{{ artifact }}"
      (keyup)="updateData()" />
    </div>
    <button (click)="handle()">Submit</button>
  </form>
  </div>
  </div>
 </div> 





export class AppComponent{
  group : string = ''
  artifact : string = ''
  description : string =  ''
  package : string = ''



    public updateData()
      {
      this.artifact = this.package.substring(12);
      }
  
  constructor() { }

  ngOnInit(): void {
  }
  
  handle(){
    if(this.artifact === "" ){
        alert("artifact is mandatory")
    }
    else{
      console.log(`{
        "Group":${this.group}
        "Artifact":${this.artifact}
        "Name":${this.artifact}
        "Description":${this.description}
        "Package":com.example.${this.artifact}
      }
    `)
     
    }
    
    
  }
  
  }

0 replies

shubhammane555 · 2022-10-14T16:19:54Z

shubhammane555
Oct 14, 2022

<title>Document</title>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

Project metadata

Group:

      <!-- artifact -->
      <section class="form-group">
        <label for="number2">Artifact:</label>
        <input
          type="text"
          name="artifact"
          autocomplete="off"
          class="form-control"
          placeholder="enter artifact "
          [(ngModel)]="artifact"
        />
      </section>
      <!-- name -->
      <section class="form-group">
        <label for="number3">Name:</label>
        <input
          type="text"
          name="name"
          autocomplete="off"
          class="form-control"
          placeholder="enter name "
          value="{{ artifact }}"
        />
      </section>

      <!-- description -->
      <section class="form-group">
        <label for="number4">Description:</label>
        <input
          type="text"
          name="dec"
          autocomplete="off"
          class="form-control"
          placeholder="enter description"
          [(ngModel)]="dec"
        />
      </section>
      <!-- pakage -->
      <section class="form-group">
        <label for="number5">Pakage Name:</label>
        <input
          type="text"
          name="package"
          autocomplete="off"
          class="form-control"
          placeholder="enter package"
          [(ngModel)]="package"
          value="com.example.{{ artifact }}"
          (keyup)="updateData()"
        />
      </section>
      <!-- button -->

      <section class="form-group mx-auto">
        <input
          type="button"
          class="btn btn-block bg-primary text-uppercase text-light"
          value="done"
          (click)="jsonData()"
        />
      </section>
    </div>
  </form>
</div>

0 replies

Angular - Two-way Binding - Live Form #19

Uh oh!

Uh oh!

akash-coded Jul 27, 2022 Maintainer

Replies: 15 comments

Uh oh!

Uh oh!

form.component.ts

Uh oh!

Uh oh!

app.component.html

app.component.ts

Uh oh!

page.component.ts

page.html

Uh oh!

APP.COMPONENT.HTML

APP.COMPONENT.TS

SCREENSHOT

Uh oh!

Uh oh!

Uh oh!

Uh oh!

app.component.ts

screenshot

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

html

Output

Uh oh!

Uh oh!

Uh oh!

Project metadata

akash-coded
Jul 27, 2022
Maintainer