Can anyone help? I would like to get the modified code so that...

1. the button would only be active when the username variable is not empty.

2. Pressing the button would reset the username value to blank.

Here is my code:

username.html

    <section class="username">

    <input
    type="text"
    class="form-control"
    (input)="onUpdateUsername($event)">


    <button class="btn btn-primary"
    [disabled] = "!allowNewUsername"
    (click)="onCreateUsername();">Add Username</button>

    <p class="test"> {{ usernameCreationStatus }} </p>
    </section>

username.component.ts

    export class UsernameCheckComponent implements OnInit {
    allowNewUsername:boolean = false;
    usernameCreationStatus = 'Nothing was created!';
    userName = 'TestUsername';

    constructor() {
    setTimeout(() => {
    this.allowNewUsername = true;
     }, 2000);
    }

    ngOnInit(): void {
    }

    onCreateUsername () {
    this.CreationStatus = 'Username was created! Username name is '   this.serverName;
    }

    onUpdateUserName(event:Event) {
    this.userName = (<HTMLInputElement>event.target).value;
     }
    }

CodePudding user response：

If you do not want to use allowNewUsername to disable/enable adding, your could just set the button to disabled when the userName is empty or the allowNewUsername is false.

<button class="btn btn-primary"
    [disabled] ="!userName || !allowNewUsername"
    (click)="onCreateUsername();">Add Username</button>

In your component class just reset the userName variable

onCreateUsername () {
    this.CreationStatus = 'Username was created! Username name is '   this.serverName;
this.userName = ''; // reset the username
    }

CodePudding user response：

You can define a getter for the button validity:

export class UsernameCheckComponent {
    public usernameCreationStatus: string = 'Nothing was created!';
    public userName: string | null = null;
    public get allowNewUsername() { return this.userName?.length }

    constructor() { }

    public onCreateUsername () {
        this.usernameCreationStatus = `Username was created! Username name is ${this.serverName}`;
    }
}

And in your template:

<section class="username">
    <input type="text"
        class="form-control"
        [(ngModel)]="userName">

    <button class="btn btn-primary"
        [disabled] = "!allowNewUsername"
        (click)="onCreateUsername()">Add Username</button>

    <p class="test"> {{ usernameCreationStatus }} </p>
</section>

CodePudding user response：

Try to add ngModel for input two way binding, so that you can access the variable value on both. (template and view).

component.html

<section class="username">
  <input type="text" class="form-control" [(ngModel)]="userName" (input)="onUpdateUsername($event)">
  <button class="btn btn-primary" [disabled] = "userName != ''" (click)="onCreateUsername();">Add Username</button>
  <p class="test"> {{ usernameCreationStatus }} </p>
</section>

component.ts

onUpdateUserName(event: Event) {
   this.CreationStatus = 'Username was created! Username name is '   this.serverName;
   this.userName = "";
}

CodePudding user response：

In app.module.ts

import { ReactiveFormsModule } from "@angular/forms";

In username.component.ts

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


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

  constructor(private fb: FormBuilder) { }

  form!: FormGroup;
  usernameEntered!: string;

  ngOnInit(): void {
    this.form = this.fb.group({
      username: this.fb.control('')
    })
  }

  onSubmit(data: any){
    console.log(data); //any function
    this.form.reset(); 
    this.usernameEntered = ''; 
  }

  userInput(data: string){
    this.usernameEntered = data; 
  }


}

In username.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <input #userInputId 
            formControlName="username" 
            type="text" 
            placeholder="username" 
            (input)="userInput(userInputId.value)"> 
    <button type="submit" [disabled]="!usernameEntered">Submit</button>
</form>