提交表單 Angular 后如何顯示用戶名

Question

我在向我的應用程序顯示和添加值方面需要幫助如何從 app.component.ts 獲取變量以顯示我嘗試刷新應用程序但似乎沒有任何效果。 我一直在谷歌搜索，但找不到任何解決方案。如何在提交表單后顯示結果我想要在提交表單以進行打印后顯示結果

app.component.html

<header >
  <div class="container">
    <nav>

        <div class="grid-container">
            <div class="item1">
        <h2 class="logo">Not facebook</h2>
      </div>
        <div class="item2">
            <form [FormGroup]="login" ngSubmit="onSubmit()">

                <span  id="usrn-input-text" class="hint"                                    >Email or Phone</span>
                <input id="usrn-input-box"    type="text"     formControlName="username" />
                <span  id="pswd-input-text" class="hint"                                    >Password</span>
                <input id="pswd-input-box"    type="password" formControlName="password" />
                <a  id="forget-password" class="link"   href="#"                         >Forgot Account?</a>
                <button id="log-in-button"   class="submit" type="submit">{{title}}</button>    
             </form>
        </div>

        </div>

</nav>
</div>

  </header>

應用程序.Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule ,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'bookface';
  login = new FormGroup({
    username:new FormControl(''),
    password:new FormControl('')
  })
  onSubmit(){
    console.log('bookface')
  }

}

Answer 1

使用此解決方案，提交表單后，會顯示用戶名

app.component.html

<header>
  <div class="container">
    <nav>

      <div class="grid-container">
        <div class="item1">
          <h2 class="logo">Not facebook</h2>
        </div>
        <div class="item2">
          <form [formGroup]="login">
            <span id="usrn-input-text" class="hint">Email or Phone</span>
            <input id="usrn-input-box" type="text" formControlName="username"/>
            <span id="pswd-input-text" class="hint">Password</span>
            <input id="pswd-input-box" type="password" formControlName="password"/>
            <a id="forget-password" class="link" href="#">Forgot Account?</a>
            <button id="log-in-button" (click)="onSubmit()" class="submit" type="submit">{{title}}</button>
          </form>

          {{result}}
        </div>

      </div>

    </nav>
  </div>

</header>

app.component.ts

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

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

  login: FormGroup;
  result: string;

  ngOnInit() {
    this.login = new FormGroup({
      username: new FormControl(''),
      password: new FormControl('')
    });
  }



  onSubmit() {
    this.result = this.login.value.username;
  }

}

Answer 2

<h3>Example property {{ componentProperty }}</h3>

大括號之間的文本通常是組件屬性的名稱。 Angular 將該名稱替換為相應組件屬性的字符串值。 假設您有一個名為HelloComponent的變量

...
export class AppComponent implements OnInit {
componentProperty = "Helloworld";
...
}

Angular 將用Helloworld替換{{ componentProperty }}字段。 在您的情況下，組件應如下所示：

  export class AppComponent implements OnInit {
  result: string;
  ...
  onSubmit() {
     if (somechecks) {
       result = "success!";
     } else {
       result = "failed!";
     }
  }
  ...

您的 html：

<div class="item2">
  <form [formGroup]="login">
    <span id="usrn-input-text" class="hint">Email or Phone</span>
    <input id="usrn-input-box" type="text" formControlName="username"/>
    <span id="pswd-input-text" class="hint">Password</span>
    <input id="pswd-input-box" type="password" formControlName="password"/>
    <a id="forget-password" class="link" href="#">Forgot Account?</a>
    <button id="log-in-button" (click)="onSubmit()" class="submit" type="submit">{{title}}</button>
  </form>

  <div ng-if="result == '' || result == null">{{result}}</div>
</div>