提交表格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>

app.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;
  }

}