专栏首页finleyMaAngular 表单2--响应式表单, 处理异步数据

Angular 表单2--响应式表单, 处理异步数据

上一节中我们定义了一个响应式表单,其中表单数据是在定义的时候就初始化好的,但是很多时候数据需要异步获取,比如 打开一个编辑页面,需要

  1. 请求HTTP拿到数据。
  2. 根据数据修改表单中字段的值,最终体现在页面上。 我们改造上一节的例子,成为异步获取数据。 我们先创建service文件, 写一个loadUser方法,模拟HTTP请求
import { Injectable } from '@angular/core';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

// /api/users/1

export interface User {
  id: number;
  firstName: string;
  lastName: string;
  about: string;
}

const fakeData = {
  id: 0,
  firstName: 'Cory',
  lastName: 'Rylan',
  about: 'Web Developer'
};

@Injectable()
export class UserService {
  constructor() { }

  loadUser() {
    return of<User>(fakeData).pipe(
      delay(2000)
    );
  }
}

组件中,调用该方法

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

import { UserService, User } from './user.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  user$: Observable<User>;

  constructor(
    private formBuilder: FormBuilder,
    private userService: UserService) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      about: []
    });

    this.user$ = this.userService.loadUser().pipe(
      // tap 返回的还是 Observable 这里我们不订阅,我们在模板中使用 async pipe 和 if else 语句实现有条件的显示表单
      tap(user => this.form.patchValue(user))
    );
    // .subscribe();
  }

  submit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

修改模板

<form *ngIf="user$ | async; else loading" [formGroup]="form" (ngSubmit)="submit()">
  <label for="firstname">First Name</label>
  <input id="firstname" formControlName="firstName" />
  <div *ngIf="form.controls.firstName.errors?.required && form.controls.firstName.touched" class="error">
    *Required
  </div>

  <label for="lastname">Last Name</label>
  <input id="lastname" formControlName="lastName" />
  <div *ngIf="form.controls.lastName.errors?.required && form.controls.lastName.touched" class="error">
    *Required
  </div>

  <label for="about">About</label>
  <textarea id="about" formControlName="about"></textarea>

  <button [disabled]="!form.valid">Save Profile</button>
</form>

<ng-template #loading>
  Loading User...
</ng-template>

你会发现页面打开后一开始显示Loading User...过了大概2s后文字消失并显示表单。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • RxJS 在 Angular响应式表单中的使用

    FormControl 的 valueChanges 属性和 statusChanges 属性包含了会发出变更事件的可观察对象。 例子

    mafeifan
  • Angular 依赖注入 初认

    服务是什么概念?可以简单地认为它是一个功能模块,重要在于它是单例对象,并且可以注入到其他的地方使用。

    mafeifan
  • Angular 使用 RxJS 优化处理多个Http请求

    注意:上面的this.http.get... 处理HTTP最好放到单独的Service文件中,再注入到Component。这里为了演示没有这么做。

    mafeifan
  • RxJS 在 Angular响应式表单中的使用

    FormControl 的 valueChanges 属性和 statusChanges 属性包含了会发出变更事件的可观察对象。 例子

    mafeifan
  • java学习与应用(4.3.1)--XML与解析

    XML(extensible markup language可扩展标记语言),由万维网联盟(W3C)提出,以替代HTML,后来基本用语存储数据(配置文件,网络中...

    嘘、小点声
  • JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼?

    JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不同点,其中一个不同点就是this。

    Fundebug
  • 计算属性的setter和getter

            刚才通过计算lastName和firstName获取了整个姓名,当时我们只是通过一直的data对象中属性进行合成的,这个也就是计算属性(comp...

    十月梦想
  • 星际巡航—玩转javascript中this!

    在javascript异步编程、函数式编程中,有两个至关重要的技术callback与this变量,又称之为回调与当前对象上下文。

    张晓衡
  • 7-并发编程

    对于CPU计算密集型的任务,python的多线程跟单线程没什么区别,甚至有可能会更慢,但是对于IO密集型的任务,比如http请求这类任务,python的多线程还...

    py3study
  • 通过脚本在Docker环境中一键安装mysql主从环境

    其中hostip是必须修改的,其他配置可以酌情修改. 注意: 如果你的Docker环境是通过Docker Toolbox,且是安装在windows环境,建议将...

    明哥的运维笔记

扫码关注云+社区

领取腾讯云代金券