小编wei*_*ian的帖子

我的目标是将所有验证消息放在组件而不是html文件中

我有一个注册页面,下面是字段:

public buildRegisterForm() {
this.userForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, Validators.pattern(this.emailPattern)]],
    retypeEmail: ['', Validators.required],
  }, { validator: formMatcherValidator('email', 'retypeEmail') }),
  passwordGroup: this.fb.group({
    password: ['', [Validators.required, strongPasswordValidator()]],
    retypePassword: ['', Validators.required],
  }, { validator: formMatcherValidator('password', 'retypePassword')}),
});
}

我正在按照本教程链接实现我想要的,即将所有验证消息放在组件文件而不是html文件中.

export const validationMessages = {
'firstName': {
'required': 'Your first name is required.',
'minlength': 'Your first name must be at least 3 characters long.'
},
'lastName': {
'required': 'Your last …

例如，我在src文件夹下创建了一个名为“ upload”的文件夹。

html文件：

<div>
   <input type="file" id="photo" (change)="onChange($event)" />
</div>
<div class="col-md-6 mb-4 mt-3">
   <button (click)="upload()" class="btn btn-primary w-100">Upload Picture</button>
</div>

upload-modal.component.ts文件

import { Http, Response } from '@angular/http';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import "rxjs/add/operator/do";
import "rxjs/add/operator/map";
const uploadURL = '/upload';

@Component({

selector: 'upload-modal',
templateUrl: './upload-modal.component.html',
styleUrls: ['./upload-modal.component.css']
})
export class UploadModalComponent {
displayMessage: string = '';
constructor(public activeModal: NgbActiveModal, private http: Http, private el: ElementRef) { }
setDisplayMessage(msg: string) {
   this.displayMessage = msg;
 }

upload() {
   this.activeModal.dismiss('Cross …