加入网站图标预览和友链页链接自动补写

src/app/view/link/link.component.html

@@ -122,7 +122,13 @@
             <nz-form-item>
                 <nz-form-label nzFlex="100px">网站图标</nz-form-label>
                 <nz-form-control nzFlex="auto" nzErrorTip="链接格式不正确">
+                    <nz-input-group [nzSuffix]="icon" nzSize="large">
                         <input nz-input formControlName="iconPath">
+                    </nz-input-group>
+                    <ng-template #icon>
+                        <img style="width: 25px;height: 25px" *ngIf="applyFormGroup.value.iconPath"
+                             [src]="applyFormGroup.value.iconPath" alt="icon">
+                    </ng-template>
                 </nz-form-control>
             </nz-form-item>
             <nz-form-item>

src/app/view/link/link.component.ts

@@ -30,6 +30,7 @@ export class LinkComponent implements OnInit {
     loading: boolean = false;
     applyFormGroup: FormGroup;
     colors: Color[];
+    private lastUrl: string = '';
 
 
     ngOnInit() {
@@ -50,6 +51,13 @@ export class LinkComponent implements OnInit {
             name: [null, [Validators.required, Validators.maxLength(255)]],
             url: [null, [Validators.required, Validators.pattern(/^([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]]
         });
+        this.applyFormGroup.controls.url.valueChanges.subscribe({
+            next: data => {
+                const linkUrlData: string = this.applyFormGroup.value.linkUrl || '';
+                this.applyFormGroup.patchValue({linkUrl: linkUrlData.replace(this.lastUrl, data)});
+                this.lastUrl = data;
+            },
+        })
     }
 
     apply() {