Как отобразить имя пользователя после отправки формы Angular - PullRequest
Новая
       8

Как отобразить имя пользователя после отправки формы Angular

0 голосов
/ 19 апреля 2020

Мне нужна помощь с отображением и добавлением значений в мое приложение. Как мне получить переменные из app.component.ts, чтобы показать, что я пытался обновить приложение, но, похоже, ничего не работает. Я занимался поиском в Google, но не могу найти никаких решений. Как отобразить результат после отправки формы? Мне нужен результат отображения после отправки формы на печать

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')
  }

}

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

В этом решении после отправки формы имя пользователя отображается

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

}
0 голосов
/ 19 апреля 2020 
<h3>Example property {{ componentProperty }}</h3>

Текст в фигурных скобках часто является именем свойства компонента. Angular заменяет это имя строковым значением соответствующего свойства компонента. Предположим, у вас есть переменная с именем HelloComponent

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

Angular, которая заменит поле {{ componentProperty }} на Helloworld. В вашем случае компонент должен выглядеть следующим образом: 

  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>
...