Я пытаюсь научиться использовать Angular 7. Я следую руководству на его официальном сайте, и теперь я хочу создать форму, чтобы попытаться рассчитать фискальный код (только для итальянцев).Пользователь вставит данные для его вычисления, и когда вы начнете вводить свой фискальный код, программа в фоновом режиме начнет его вычислять, и, когда они будут равны, в форме будет напечатано сообщение «Правильно» или что-то в этом роде.Я сделал сервис, чтобы выполнить расчет и проверить его с помощью специального валидатора, получить запрос на определенный URL для получения кода города.Проблема заключается в следующем: когда я пытаюсь вызвать метод службы в компоненте, он возвращает эту ошибку «ОШИБКА TypeError: Невозможно прочитать свойство« json »из undefined».У кого-нибудь из вас есть решение?
КОМПОНЕНТНЫЙ КОД:
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroup, AbstractControl } from '@angular/forms';
import { citta } from '../country';
import { validazioneData } from '../validatorCustom';
import { JsonService } from '../json.service';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
codice: any;
successo = false;
cities = citta;
mioForm: FormGroup;
invioForm() {
if (this.mioForm.valid)
this.successo = true;
}
constructor(private json: JsonService) { }
ngOnInit() {
this.mioForm = new FormGroup({
nome: new FormControl('', [Validators.required, Validators.maxLength(10), Validators.minLength(3)]),
cognome: new FormControl('', [Validators.required, Validators.maxLength(10), Validators.minLength(3)]),
sesso: new FormControl('', Validators.required),
dataDiNascita: new FormControl('', [Validators.required, validazioneData]),
citta: new FormControl('Catanzaro', Validators.required),
codiceFiscale: new FormControl('', [Validators.required, this.validatoreCf])
});
}
validatoreCf(control: AbstractControl): { [key: string]: any } | null {
if (control && (control.value !== null && control.value !== undefined && control.value !== "" && isNaN(control.value))) {
this.codice = this.json.getCF(control);
if (this.codice === control.root.get('codiceFiscale').value.toString().trim().toUpperCase()) {
return null;
}
return {
validCF: true
}
}
}
}
HTML КОМПОНЕНТНЫЙ КОД:
<h1>MIO FROM</h1>
<form (ngSubmit)='invioForm()' [formGroup]="mioForm">
<label>
Nome:
<input type="text" formControlName="nome" placeholder="Inserisci il nome">
<!-- ERRORI Data -->
<div *ngIf="mioForm.get('nome').hasError('required') && mioForm.get('nome').touched">
Nome Richiesto!
</div>
<div *ngIf="mioForm.get('nome').hasError('minlength') || mioForm.get('nome').hasError('maxlength')">
La lunghezza deve essere compresa tra i 2 e i 12 caratteri!
</div>
</label>
<label>
Cognome:
<input type="text" formControlName="cognome" placeholder="Inserisci il cognome">
<!-- ERRORI Data -->
<div *ngIf="mioForm.get('cognome').hasError('required') && mioForm.get('cognome').touched">
Cognome Richiesto!
</div>
<div *ngIf="mioForm.get('cognome').hasError('minlength') || mioForm.get('cognome').hasError('maxlength')">
La lunghezza deve essere compresa tra i 2 e i 12 caratteri!
</div>
</label>
<label>
Sesso:
<select formControlName="sesso">
<option value="M">M</option>
<option value="F">F</option>
</select>
<!-- ERRORI Data -->
<div *ngIf="mioForm.get('sesso').hasError('required') && mioForm.get('sesso').touched">
Sesso Richiesto!
</div>
</label>
<br>
<label>
Data di nascita:
<input type="date" formControlName="dataDiNascita">
<!-- ERRORI Data -->
<div *ngIf="mioForm.get('dataDiNascita').hasError('required') && mioForm.get('dataDiNascita').touched">
Data di nascita Richiesta!
</div>
<div *ngIf="mioForm.get('dataDiNascita').hasError('validData')">
Data di nascita non valida!
</div>
</label>
<label>
Città:
<select formControlName="citta">
<option *ngFor="let c of cities" value="{{c.nome}}">{{c.nome}}</option>
</select>
<!-- ERRORI Data -->
<div *ngIf="mioForm.get('citta').hasError('required') && mioForm.get('citta').touched">
Citta Richiesta!
</div>
</label>
<label>
CODICE FISCALE:
<input type="text" formControlName="codiceFiscale">
<div *ngIf="mioForm.get('codiceFiscale').hasError('validCF') && mioForm.get('codiceFiscale').touched">Errore</div>
</label>
<div>
<button>submit</button>
</div>
</form>
<br>
<p *ngIf="successo">
BRAVISSIMO
</p>
СЕРВИСНЫЙ КОД:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AbstractControl } from '@angular/forms';
import { mesi, charDispari, charPari, finale } from './costanteCF';
@Injectable({
providedIn: 'root'
})
export class JsonService {
constructor(private http: HttpClient) { }
//Validazione codice fiscale
getCF(control : AbstractControl) {
console.log(control);
let codice: string = "";
var pt1: string;
var pt2: string;
var pt3: string;
var pt4: string;
var pt5: string;
var cf: string;
if ((control.root.get('cognome') !== null || undefined) && control.root.get('nome') !== null && control.root.get('citta') !== null && control.root.get('dataDiNascita') !== null && control.root.get('sesso') !== null){
pt1 = this.primaPT(control.root.get('cognome').value);
pt2 = this.secondaPT(control.root.get('nome').value);
pt3 = this.terzaPT(control.root.get('dataDiNascita').value, control.root.get('sesso').value);
pt4 = this.quartaPT(control.root.get('citta').value);
pt5 = this.quintaPT(cf);
codice = pt1 + pt2 + pt3 + pt4 + pt5;
return codice.toString().trim().toUpperCase();
}
}
getCCC(nomeCitta: any): String {
let risultato: any;
this.http.get('http://www.gerriquez.com/comuni/ws.php?dencomune='+nomeCitta).subscribe(dato => risultato = dato);
console.log(risultato);
risultato = JSON.parse(risultato);
risultato = risultato.CodiceCatastaleDelComune.value;
console.log("ciao"+risultato);
return risultato;
};
//quarta parte relativa alla citta
quartaPT(citta: any): string {
let http: HttpClient;
//let form = new FormComponent(http);
if (citta !== undefined && citta !== null && citta !== "")
citta = this.getCCC(citta);
return citta;
}
//Ultima lettera
quintaPT(cf: any): string {
if (cf !== undefined && cf !== null && cf !== "") {
let dispari = charDispari;
let pari = charPari;
let finali = finale;
let somma: number;
let carattereFinale: string;
let ar = cf.split('');
for (var i = 0; i < ar.length; i++) {
if ((i % 2) === 0) {
for (let a of dispari) {
if (a.n1 === (ar[i])) {
somma = somma + a.n2;
}
}
}
}
for (var i = 0; i < ar.length; i++) {
if ((i % 2) === 1) {
for (let a of pari) {
if (a.n1 === (ar[i])) {
somma = somma + a.n2;
}
}
}
}
for (let a of finali) {
if ((somma % 26) === a.n2) {
carattereFinale = a.n1;
}
}
return carattereFinale;
}
return "";
}
//Terza parte relativa alla datra di nascita
terzaPT(dataDiNascita: any, sesso: any): string {
if (dataDiNascita && sesso !== undefined && dataDiNascita && sesso !== null && dataDiNascita && sesso !== "") {
let listaMesi = mesi;
let data: any = new Date(dataDiNascita);
dataDiNascita.toString();
dataDiNascita = '';
dataDiNascita += data.getFullYear();
let mese = data.getMonth();
for (let a of listaMesi) {
if (mese === a.Mese) {
mese = a.lettera.toString();
dataDiNascita += mese;
}
}
let giorno = data.getDay();
if (sesso.toUpperCase() === 'F')
giorno = giorno + 40;
dataDiNascita += giorno;
return dataDiNascita;
}
return "";
}
//Seconda parte relativa al nome
secondaPT(nome: any): string {
if (nome !== undefined && nome !== null && nome !== "") {
nome = nome.trim().toUpperCase();
if (nome.length < 3) {
let ar = nome.split('');
if (ar.length === 2) {
ar.push('X');
return ar.toString();
}
ar.push('X');
ar.push('X');
return ar.toString();
}
let cont = 0;
let ar = nome.split('');
console.log(ar);
nome = '';
for (var i = 0; i < ar.length; i++) {
if (nome.length < 3 && (ar[i] !== 'A' && ar[i] !== 'E' && ar[i] !== 'I' && ar[i] !== 'O' && ar[i] !== 'U')) {
if (cont !== 1) {
nome += ar[i];
cont++;
ar[i] = null;
}
}
}
if (nome.length < 3) {
for (var i = 0; i < ar.length; i++) {
if (ar[i] !== null) {
nome += ar[i];
ar[i] = null;
}
}
}
return nome;
}
return "";
}
//Prima parte relativa al cognome
primaPT(cognome: any): string {
if (cognome !== undefined && cognome !== null && cognome !== "") {
cognome = cognome.trim().toUpperCase();
if (cognome.length < 3) {
let ar = cognome.split('');
if (ar.length === 2) {
ar.push('X');
return ar.toString();
}
ar.push('X');
ar.push('X');
return ar.toString();
}
let ar = cognome.split('');
console.log(ar);
cognome = '';
for (var i = 0; i <= ar.length; i++) {
if (cognome.length < 3) {
if (ar[i] !== 'A' && ar[i] !== 'E' && ar[i] !== 'I' && ar[i] !== 'O' && ar[i] !== 'U') {
cognome += ar[i];
}
}
}
return cognome;
}
return "";
}
}
КОД ОШИБКИ:
ERROR TypeError: Cannot read property 'json' of undefined
at push../src/app/form/form.component.ts.FormComponent.validatoreCf (form.component.ts:48)
at forms.js:658
at Array.map (<anonymous>)
at _executeValidators (forms.js:658)
at forms.js:623
at forms.js:658
at Array.map (<anonymous>)
at _executeValidators (forms.js:658)
at FormControl.validator (forms.js:623)
at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runValidator (forms.js:2914)