登录界面的 Component selector：`cx-update-profile`

![](https://img-blog.csdnimg.cn/img_convert/477da2fbd1af6a816ad5f8785e6e1d8c.png)

找到对应的 Component 名称：`UpdateProfileComponent`：

![](https://img-blog.csdnimg.cn/img_convert/b346c9b1442d0898a5dabec9d4d12e9c.png)

component 只有一个 FormGroup 实例。

![](https://img-blog.csdnimg.cn/img_convert/a2fd59b9725e214a69fca09e047881c2.png)

service 的 form 什么时候赋的值呢？在 Service class 里复制，没有使用 form builder，而是 手动创建 FormGroup 实例。该 `FormGroup` 构造函数，接收的参数为 JSON 对象，key 为绑定到 HTML 里的控件名，值为这些控件的初始值。
![](https://img-blog.csdnimg.cn/img_convert/d32103cde766758fbbb31efaf601bfca.png)

这个 form group 通过 `patchValue` 赋值：

![](https://img-blog.csdnimg.cn/img_convert/be6a7ad39a567ca0abc4af39119de8a4.png)

测试 url：

http://localhost:4299/electronics-spa/en/USD/my-account/update-profile

![](https://img-blog.csdnimg.cn/img_convert/9f8f9db47e90c1cb1af10072f0524e09.png)

通过 `formControlName` 指令将 HTML 里的 input Element 同 Component 里的 FormControl 实例进行绑定。

![](https://img-blog.csdnimg.cn/img_convert/e384ab9ef769774724485f02edf6c3b5.png)

![](https://img-blog.csdnimg.cn/img_convert/048b80f1ce964ace61d8999f4053e697.png)

这个 server 类里还有这样一个 `is` 用法：

```typescript
 protected user$ = this.userProfile
    .get()
    .pipe(filter((user): user is User => Boolean(user)));
```

![](https://img-blog.csdnimg.cn/img_convert/568da75f8298015ead8a7dd8d48f10f1.png)

这里的 `is` 是一个 `type guard` function, 参考这个[链接](https://stackoverflow.com/questions/40081332/what-does-the-is-keyword-do-in-typescript)。

看下面这个例子：

```typescript
function isString(test: any): test is string{
    return typeof test === "string";
}

function example(foo: any){
    if(isString(foo)){
        console.log("it is a string" + foo);
        console.log(foo.length); // string function
    }
}
example("hello world");
```

如果 isString 被调用之后，如果函数返回 true，就证明输入参数 `test` 确实是 String 类型，此时 TypeScript 编译器会认为被 `isString` 保护的这个 IF 代码块里，变量 `foo` 的类型一定是 `string`，因此可以直接使用 foo.length 访问这个字符串变量的 length 属性。

![](https://img-blog.csdnimg.cn/img_convert/aab2034eb712ab1be07267eb80298baf.png)

Setvalue 和 Patchvalue 是来自 Angular Formgroup 的方法。 它们都在表单组中设置控件的值。 明显的区别是 setvalue 不能 `exclude` 掉某些控件，而 patchvalue 能够做到这一点。

因此，假设我们有一个带有 2 个控件的表单组：姓名和年龄。

如果我们想设置一个控件的值，这是行不通的，因此我们必须设置两个控件的值：

```typescript
formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});
```
如果一个 formgroup 里包含了相当数量的 form control 实例，使用 `setValue` 需要将这些实例的值全部枚举出来作为 `setValue` 的输入参数。

ITPub博客

SAP 电商云登录界面如何增添新的字段

最新文章